vscode開發vue項目使用eslint+prettier格式化：保存時自動執行lint進行修復（升級篇，保存時可格式化模板和css）

說明，之前的vscode開發vue項目保存時自動執行lint進行修復保存格式化，只對vue中js部分有效，template和css沒有格式化，先基於此進行升級，步驟如下：

1. vue-cli創建項目時選擇eslint+prettier（也可后期安裝使用）

2. .eslintrc.js文件配置eslint規則（按照自己需求定義）

3. .eslintignore配置忽略文件

*.config.js

4. .prettierrc配置prettierrc

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

5. 安裝@vue/eslint-config-airbnb, 用於實時錯誤提示

yarn add @vue/eslint-config-airbnb --save-dev

6. vscode下載eslint插件

7. vscode進行設置

找到settings.json

在里面寫入如下內容進行保存

{
   // vscode默認啟用了根據文件類型自動設置tabsize的選項
  // "editor.detectIndentation": false,
  // 重新設定tabsize
  // "editor.tabSize": 2,
  // #每次保存的時候自動格式化 
  "editor.formatOnSave": true,
  // #每次保存的時候將代碼按eslint格式進行修復
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // #讓prettier使用eslint的代碼格式進行校驗 
  "prettier.eslintIntegration": true,
  // #去掉代碼結尾的分號 
  "prettier.semi": false,
  // #使用帶引號替代雙引號 
  "prettier.singleQuote": true,
  // #讓vue中的js按編輯器自帶的ts格式進行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // #這個按用戶自身習慣選擇 
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue組件中html代碼格式化樣式
    }
  },
  // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒號
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括號
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
  "stylusSupremacy.insertNewLineAroundBlocks": false // 兩個選擇器中是否換行
}

這樣，以后保存文件的時候會根據eslint配置的規則，自動修復一些不合規的代碼，不用每次保存完手動運行yarn run link去修復了。而且手動格式化也會根據配置規則進行格式化

注意： 格式化文檔的方式選擇Vetur；vscode允許使用eslint檢查文件（vscode右下角）