Vs Code中Vue代碼格式插件，Vetur、ESLint 、Prettier - Code formatter的介紹使用及相關配置

一、插件的介紹與安裝
1、Vetur插件

Vetur是一款Vue代碼高亮顯示的一款插件，在沒有使用此插件前，以 .vue的文件名代碼是沒有顏色的！！！

 

 

安裝步驟：在擴展商店中搜索（ Vetur ）點擊安裝

 

 

2、ESLint 插件

ESLint插件主要用來檢測代碼的語法格式，以便我們規範書寫，避免因編譯所發生的錯誤 。
作用如下圖：

 

 

安裝步驟：在擴展商店中搜索（ ESLint ）點擊安裝

 

 

3、Prettier - Code formatter插件

該插件主要用於格式化代碼
在在擴展商店中搜索（ Prettier - Code formatter ）點擊安裝

 

 

二、相關文件配置

1、在安裝完以上插件後，進入Vs Code設置面板。

 

 

2、點擊按鈕打開json文件

 

 

3、複製以下代碼片段 ，注意：代碼要粘貼在原來配置對象裏面，追加如下配置代碼，注意格式：

代碼如下：

"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ],
"vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 80,
      // Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
      "wrap_attributes": "force-expand-multiline"
    }
  },
  "editor.tabSize": 2,
  "vetur.validation.template": false,
  "git.ignoreLimitWarning": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "git.confirmSync": false,
  "eslint.quiet": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceAfterConstructor": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.preferences.quoteStyle": "single",
  "javascript.format.insertSpaceAfterConstructor": true,
  "typescript.preferences.quoteStyle": "single",
  "html.format.wrapAttributes": "force-expand-multiline",
  "editor.formatOnSave": true,
  "prettier.vueIndentScriptAndStyle": true,
  "prettier.singleQuote": true,
  "prettier.useTabs": true,
  "prettier.printWidth": 100,
  "eslint.workingDirectories": [
    ".eslintrc.js",
    {
      "mode": "auto"
    }
  ]

 

注意：配置好之後，如果Vs Code右下角提示ESLint被禁用，點擊一下，然後選擇 allowEverywhere