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

項(xiàng)目使用postcss，嵌套的語法會被vscode報(bào)錯(cuò)，有沒有什么設(shè)置可以忽略掉報(bào)錯(cuò)呢……
就像這種，里層的嵌套就會被標(biāo)紅。

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

本身在css中這樣寫不行，雖然vsode也不知道我要用postcss編譯，報(bào)錯(cuò)確實(shí)看起來也是合情合理。不過這實(shí)在影響查找真的錯(cuò)誤（以及強(qiáng)迫癥……）……
實(shí)在不行還是用回scss算了?

回答

編輯回答

不歸路

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

2018年9月2日 01:58

編輯回答

逗婦乳

我很早之前也遇到過這種心理障礙式的問題, 所以測試了以下題主采納的方案, 不知道哪里出問題似乎沒什么作用. 而且題主應(yīng)該不是說emmet的問題吧?

我認(rèn)為我的方案比采納的更好, 具體如下:

需要安裝的插件, 如果已安裝請忽略.

npm i -D postcss-scss precss

postcss.config.css配置如下, 我另外有用到autoprefixer和cssnano, 當(dāng)然你可以根據(jù)個(gè)人情況選擇, 重要部分是parser: 'postcss-scss'和require('precss')

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

最后是VSCODE設(shè)置, 我自己做了全局設(shè)置, 因?yàn)榇蟛糠智闆r下是寫scss, 當(dāng)然你也可以根據(jù)情況配置成工作區(qū)設(shè)置, 內(nèi)容如下:

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

這段話的意思是將css文件作為scss語法高亮, 就不會出錯(cuò)了.

代碼展示:

/* 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}

如果沒理解錯(cuò)的話, 題主是想解決這個(gè)問題?

我將有個(gè)之前學(xué)習(xí)postcss的例子, 可以參考我新建的分支: postcss study

大腦根據(jù)記憶手寫, 如果步驟有遺漏或有誤歡迎留言糾正...?

2017年10月2日 06:58

編輯回答

枕邊人

我是提問者，幾天沒人回答，終于解決后所以最后自己回答了……。

vscode支持postcss語法

安裝 postcss-sugar-language 這個(gè)插件，然后就能在右下角點(diǎn)擊格式名稱選擇PostCss格式了，可使用.postcss .pcss .sss以及.css后綴，我選用了熟悉的css后綴。

將css文件視作postcss（為了方便.css文件使用postcss語法不被報(bào)錯(cuò)），以及讓emmet支持postcss文件。
在settings中的配置：

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

另外設(shè)置里面不要修改 "emmet.showExpandedAbbreviation": "always",（默認(rèn)就是always，不過alaways并不如inMarkupAndStylesheetFilesOnly好），就能在postcss中使用emmet的簡寫（比如dib擴(kuò)展成display:inline-block），這樣就能愉快地在.css后綴的文件中使用postcss格式，并且使用emmet啦。