stylelint

stylelint是一個開源CSS樣式檢查工具。類似ESLint，可以集成在VSCode中，自動檢查和自動修復(fù)。下面介紹一下在VSCode中的使用方法。

安裝和使用步驟

1、在工程里安裝stylelint。同時推薦安裝stylelint-config-standard和stylelint-webpack-plugin。直接執(zhí)行npm install stylelint stylelint-config-standard stylelint-webpack-plugin - -save-d 。其中stylelint-config-standard是官方推薦的標(biāo)準(zhǔn)規(guī)則配置，一般情況直接遵守標(biāo)準(zhǔn)規(guī)則即可。stylelint-webpack-plugin是webpack打包時使用的擴展組件。

2、在工程目錄下添加stylelint.config.js文件，用于規(guī)則的配置

module.exports = {
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": [
          "v-deep"
        ]
      }
    ]
  }
}

其中extends是引入的規(guī)則定義擴展。rules是自己配置的規(guī)則，比如stylelint不識別vue里的v-deep指令，這是設(shè)置忽略該告警

3、在VSCode的插件市場里搜索stylelint并安裝

4、設(shè)置在VSCode中自動修復(fù)stylelint錯誤，在setting.json中增加如下配置即可。

"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
},

5、上述配置完成后，在VSCode中就可以查看到具體的stylelint檢查結(jié)果了。編輯窗口紅色波浪線示警，鼠標(biāo)懸停后提示錯誤信息，底部問題窗口會顯示錯誤信息。

6、大部分的問題stylelint在保存是會自動修復(fù)，同時還有補齊和格式話的功能。不能自動修復(fù)的手工修改一下。

stylelint官網(wǎng)：https://stylelint.io/

Vue代碼提示插件

VSCode插件市場里相關(guān)插件非常多，可以自行選用。這里推薦兩款比較好用的插件。

VueHelper

可能是目前VSCode最好的vue代碼提示插件，不僅包括了vue2所有api，還含有vue-router2和vuex2的代碼提示。

插件官網(wǎng)：https://marketplace.visualstudio.com/items?itemName=oysun.vuehelper

vue-helper

主要亮點是支持 Element-UI, VUX, IVIEW的代碼提示，使用上述UI組件的的項目推薦使用。

插件官網(wǎng)：https://marketplace.visualstudio.com/items?itemName=shenjiaolong.vue-helper