vscode 自動格式化 vue 項目代碼

不管是多人合做仍是我的開發的項目，統一的代碼風格對於項目的維護都有着至關的益處，同時，各類代碼質量的校驗規則還可在開發初期便避免一些低級錯誤的出現

概要

本文主要經過 vscode-eslint，vscode-stylelint 兩個插件，及 .vscode/extensions.json，.vscode/setting.json，.eslintrc.js，.stylelintrc.js 四個配置文件，實現 vscode 在保存文件時自動對 vue 文件的 template，script，style 三個部分自動進行錯誤修正及格式統一的功能

配置

• .vscode/extensions.json

自動推薦安裝格式化所需插件

{
  "recommendations": [
    "octref.vetur",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "editorconfig.editorconfig"
  ]
}

• .vscode/setting.json

統一編輯器自動格式化配置，同時關閉 vetur 的部分配置，減小資源消耗

{
  "eslint.validate": [
    "javascript",
    "html",
    "vue"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "vetur.format.enable": false,
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false
}

• .editorconfig (推薦)

統一編輯器的默認換行及縮進規則

[*]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

• .eslintrc.js

將默認的 plugin:vue/essential 替換爲 plugin:vue/recommended 以便實現對 template 部分的格式化，同時更加嚴格的校驗規則也利於代碼質量的提高

module.exports = {
  // ...
  extends: [
    'plugin:vue/recommended',
    '@vue/standard'
  ],
  // ...
}

• .stylelintrc.js

樣式格式化配置

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order'
  ]
}

其餘

vscode 的格式化插件大體可分爲 format 如 prettier，js-beautify-html 等和 lint 如 eslint，stylelint 等兩種

早期 eslint 等校驗工具並不具有修正格式錯誤的能力，因而以 prettier 爲表明的格式化工具出現並受到推崇，但同時也存在與 eslint 規則衝突等問題，而目前 eslint 等工具均已支持修正能力，同時還有對代碼質量的校驗能力，因此更加推薦一些 (也可能我對 prettier 瞭解的不夠多，若是有什麼其餘優點還請指出)

format 工具也可經過如下配置實現文件保存時自動格式化 (不推薦)

• .vscode/setting.json

  {
     "editor.formatOnSave": true
  }