問題描述

vscode中預設程式碼格式化ctrl+shift+f後，程式碼無法通過eslint的程式碼風格檢查。

解決方案

首先安裝eslint，prettier-Code formatter，vetur 這三個外掛，大多數情況下vetur已經安裝了。

然後檔案——首選項——設定，來到使用者設定。

使用者設定這裡配置如下程式碼，

具體程式碼：

{
  "workbench.editor.enablePreview": false, //開啟檔案不覆蓋
  "search.followSymlinks": false, //關閉rg.exe程序
  "editor.minimap.enabled"
 
: false, //關閉快速預覽
  "files.autoSave": "afterDelay", //開啟自動儲存
  "editor.lineNumbers": "on", //開啟行數提示
  "editor.quickSuggestions": {
    //開啟自動顯示建議
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //製表符符號eslint
  "editor.formatOnSave": true, //每次儲存自動格式化
  "eslint.autoFixOnSave"
 
: true, // 每次儲存的時候將程式碼按eslint格式進行修復
  "prettier.eslintIntegration": true, //讓prettier使用eslint的程式碼格式進行校驗
  "prettier.semi": false, //去掉程式碼結尾的分號
  "prettier.singleQuote": true, //使用帶引號替代雙引號
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函式(名)和後面的括號之間加個空格
  "vetur.format.defaultFormatter.html"
 
: "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //屬性強制折行對齊
    }
  },
  "eslint.validate": [
    //開啟對.vue檔案中錯誤的檢查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "workbench.colorTheme": "Kimbie Dark"
}

儲存之後，再次使用ctrl+shift+f格式化，發現可以通過eslint風格檢測，問題解決。