vscode如何postcss语法并且对其支持emmet和格式化操作

Question

项目使用postcss，嵌套的语法会被vscode报错，有没有什么设置可以忽略掉报错呢……
就像这种，里层的嵌套就会被标红。

.pages {
  height: 100%;
  & > div {
    width: 100%;
  }
}

本身在css中这样写不行，虽然vsode也不知道我要用postcss编译，报错确实看起来也是合情合理。不过这实在影响查找真的错误（以及强迫症……）……
实在不行还是用回scss算了?

Answer 1

我是提问者，几天没人回答，终于解决后所以最后自己回答了……。

---

• vscode支持postcss语法
  安装 postcss-sugar-language 这个插件，然后就能在右下角点击格式名称选择PostCss格式了，可使用.postcss .pcss .sss以及.css后缀，我选用了熟悉的css后缀。

• 将css文件视作postcss（为了方便.css文件使用postcss语法不被报错），以及让emmet支持postcss文件。
  在settings中的配置：

  "files.associations": {
    "*.css": "postcss"
  },
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact",
    "postcss": "css"
  }

  另外设置里面不要修改 "emmet.showExpandedAbbreviation": "always",，默认值就是是always，不过alaways的出发判定机制并不如inMarkupAndStylesheetFilesOnly好，从名字也能看出来:

  "inMarkupAndStylesheetFilesOnly"，将在 html、haml、jade、slim、xml、xsl、css、scss、sass、less 和 stylus 文件中生效。
  若选择 "always"，将在所有适用文件 (不仅仅是标记或 CSS 文件) 的所有部分生效。

  但是在该需求要还是不要改这个值，这样就能在postcss中使用emmet的简写（比如dib扩展成display:inline-block），这样就能愉快地在.css后缀）的文件中使用postcss格式(伪装成css的postcss，参看上一条）并且使用emmet啦。

以上目的是为了不改变.css文件情况下，自如地切换postcss和css，想写什么前也不用改下后缀，毕竟很多时候我们还是写原生css，同时兼顾使用emmet，这对使用习惯影响很小，唯一不爽就是没法增加inMarkupAndStylesheetFilesOnly中的值，加一个postcss多好呀?。

• postcss文件不能格式化
  2019.10.10更新,现在prettier新版又没问题了，直接安装就行啦。
  以下就可以不用看了，真香prettier。

  ——————————————————————————————————————————————————

  安装前端都喜欢安装的prettier插件prettier -code formater

  最近不能格式化了（版本1.7.1）…… prettier更新后的问题,prettier插件不知从哪个版本起开始抽风，不能格式化css和html，不过默认vscode是可以格式化html的我们只需要禁用prettier对html格式化的接管就行了，在设置中Prettier的disable Languages处修改如下：

   "prettier.disableLanguages": ["vue", "html"]

  或者可以安装prettier1.6.1版，这个版本html格式化没有抽风。

  不过可惜的是vscode居然自己不能格式化css（这个就不吐槽了，n版本前就吐槽过），而prettier喵的明明介绍里面写的 format your JavaScript / TypeScript / CSS using Prettier.，现在连原生css都没法格式化了，要你何用啊，在真香定律作用下，我决定暂时留着这货……安装beautify插件。

  机智如我（不要脸），发现在beautify插件配置中可塞进去postcss，直接剥夺prettier对css的接管权限（估计下一步就是将其打入冷宫了，beautify也能格式化json和js呢）在settings的"beautify.language":的css数组中添加postcss：

   "prettier.disableLanguages": ["vue", "html", "css"]
   "beautify.language": {
   "css": [
    "css",
    "scss",
    "postcss"
   ],
  }

  这个方法最完美啊，还简单。

另提示：使用ctrl-shift-a进行块注释（即/* */），询问过作者，他说后面会把ctrl-/的注释风格改成/* */。

Answer 2

安装 https://marketplace.visualstu... ，修改配置 "css.validate": false

Answer 3

我很早之前也遇到过这种心理障碍式的问题, 所以测试了以下题主采纳的方案, 不知道哪里出问题似乎没什么作用. 而且题主应该不是说emmet的问题吧?

我认为我的方案比采纳的更好, 具体如下:

需要安装的插件, 如果已安装请忽略.

npm i -D postcss-scss precss

postcss.config.css配置如下, 我另外有用到autoprefixer和cssnano, 当然你可以根据个人情况选择, 重要部分是parser: 'postcss-scss'和require('precss')

module.exports = {
  parser: 'postcss-scss',
  plugins: [
    require('precss'),
    require('autoprefixer'),
    require('cssnano')
  ]
}

最后是VSCODE设置, 我自己做了全局设置, 因为大部分情况下是写scss, 当然你也可以根据情况配置成工作区设置, 内容如下:

"files.associations": {
    "*.css": "scss"
}

这段话的意思是将css文件作为scss语法高亮, 就不会出错了.

代码展示:

/* css测试 */
$blue: #056ef0;
.test {
  display: flex; // scss注释
  color: $blue;
  .box {
    flex: 1;
  }
}

编译后:

.test{display:-webkit-box;display:-ms-flexbox;display:flex;color:#056ef0}.test .box{-webkit-box-flex:1;-ms-flex:1;flex:1}

如果没理解错的话, 题主是想解决这个问题?

我将有个之前学习postcss的例子, 可以参考我新建的分支: postcss study

大脑根据记忆手写, 如果步骤有遗漏或有误欢迎留言纠正...?