ESlint + Stylelint + VSCode自動格式化代碼(2020)

eslint 格式化代碼

本文用 Vue 項目作示範。

利用 Vue-CLI 建立項目時要將 ESlint 選上，下載完依賴後，用 VSCode 打開項目。

安裝插件 ESLint，而後 File -> Preference-> Settings（若是裝了中文插件包應該是 文件 -> 選項 -> 設置），搜索 eslint，點擊 Edit in setting.json

將如下選項添加到配置文件

"editor.codeActionsOnSave": {
        "source.fixAll": true,
    },
複製代碼

同時要確保 VSCode 右下角的狀態欄 ESlint 是處於工做狀態的。

配置完以後，VSCode 會根據你當前 Vue 項目下的 .eslintrc.js 文件的規則來驗證和格式化代碼。

TypeScript

下載插件

npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
複製代碼

在 .eslintrc 配置文件，添加如下兩個配置項：

"parser": "@typescript-eslint/parser",
"plugins": [
    "@typescript-eslint"
],
複製代碼

在根目錄下的 package.json 文件的 scripts 選項裏添加如下配置項：

"scripts": {
  "lint": "eslint --ext .js,.ts,.tsx test/ src/",
},
複製代碼

test/ src/ 是你要校驗的目錄。修改完後，如今 ts 文件也能夠自動格式化了。

若是你使用 Vue-CLI 建立項目，而且想要格式化 TypeScript 的代碼，則須要在 .eslintrc.js 文件添加或修改如下幾項：

parser: 'vue-eslint-parser',
plugins: [
    '@typescript-eslint',
],
parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
},
複製代碼

這樣就能夠格式化 .js .ts .vue 文件了。

stylelint 格式化代碼

下載依賴

npm install --save-dev stylelint stylelint-config-standard
複製代碼

在項目根目錄下新建一個 .stylelintrc.json 文件，並輸入如下內容：

{
    "extends": "stylelint-config-standard"
}
複製代碼

VSCode 添加 stylelint 插件：

而後就能夠看到效果了。

若是你想修改插件的默認規則，能夠看官方文檔，它提供了 170 項規則修改。例如我想要用 4 個空格做爲縮進，能夠這樣配置：

{
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": 4
    }
}
複製代碼

若是你想格式化 sass scss 文件，則須要下載 stylelint-scss 插件：

npm i -D stylelint-scss
複製代碼

而後就能夠格式化 scss 文件了。

擴展

如何格式化 HTML、Vue（或其餘後綴） 文件中的 HTML 代碼？

這須要利用 VSCode 自帶的格式化，快捷鍵是 shift + alt + f。假設當前 VSCode 打開的是一個 Vue 文件，按下 shift + alt + f 會提示你選擇一種格式化規範。若是沒提示，那就是已經有默認的格式化規範了（通常是 vetur 插件），而後 Vue 文件的全部代碼都會格式化，而且格式化規則還能夠本身配置。

具體規則以下圖所示，能夠根據本身的喜愛來選擇格式化規則。

由於以前已經設置過 ESlint 和 Stylelint 的格式化規則了，因此 Vue 文件只須要格式化 HTML 中的代碼，所以須要禁止 vetur 格式化 JavaScript 和 CSS 代碼：

根據上圖配置完成後，回到剛纔的 Vue 文件。隨意打亂代碼的格式，再按下 shift + alt + f ，會發現 HTML 代碼已經格式化了，可是 JavaScript 和 CSS 代碼並沒格式化。不要緊，由於已經設置了 ESlint 和 Stylelint 格式化，因此只要執行保存操做，JavaScript 和 CSS 的代碼也會自動格式化。

同理，其餘類型的文件也能夠這樣設置格式化規範。