核心就是 Vetur+ESLint，其他的我覺(jué)得就是錦上添花的作用

快速配置

本文的配置是記錄Vue CLI生成的項(xiàng)目，若不是，請(qǐng)自行處理依賴關(guān)系

打開(kāi) vscode 的插件安裝，搜索上面的插件，一一安裝

打開(kāi) vscode 的設(shè)置，鍵入以下代碼

{
  // 保存時(shí)自動(dòng)格式化代碼

  "editor.formatOnSave": true,
  // eslint配置項(xiàng)，保存時(shí)自動(dòng)修復(fù)錯(cuò)誤
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

  // 讓vetur使用vs自帶的js格式化工具，以便在函數(shù)前面加個(gè)空格
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.semicolons": "remove",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 指定 *.vue 文件的格式化工具為vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 指定 *.js 文件的格式化工具為vscode自帶
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  // 默認(rèn)使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

在項(xiàng)目的根目錄建立.eslintrc.js文件，鍵入以下代碼（Vue CLI 已帶）

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
}

在項(xiàng)目的根目錄建立.prettierrc文件，鍵入以下代碼

{
  "semi": false,
  "singleQuote": true
}

在項(xiàng)目的根目錄建立.editorconfig文件，鍵入以下代碼（Vue CLI 已帶）

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

至此，即可完成，詳細(xì)解釋請(qǐng)看后面

Vetur

這個(gè)插件是 vscode 能優(yōu)雅寫 Vue 的核心，絕對(duì)的神器，它的優(yōu)點(diǎn)：

1. 代碼高亮
2. 代碼片段
3. Emmet 語(yǔ)法支持
4. 語(yǔ)法錯(cuò)誤校驗(yàn)檢查
5. 格式化代碼
6. 代碼提醒
7. 對(duì)三方 UI 框架的支持

這里主要說(shuō)說(shuō)格式化代碼相關(guān)，防止和 ESLint 打架。

從官方文檔可以看出，Vetur集成了prettier，這就非常棒了。Vetur能夠讓 *.vue 文件中不同的塊使用不同的格式化方案，