核心就是 Vetur+ESLint，其他的我觉得就是锦上添花的作用

快速配置

本文的配置是记录Vue CLI生成的项目，若不是，请自行处理依赖关系

打开 vscode 的插件安装，搜索上面的插件，一一安装

打开 vscode 的设置，键入以下代码

{
  // 保存时自动格式化代码

  "editor.formatOnSave": true,
  // eslint配置项，保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

  // 让vetur使用vs自带的js格式化工具，以便在函数前面加个空格
  "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"
  },
  // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

在项目的根目录建立.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',
  },
}

在项目的根目录建立.prettierrc文件，键入以下代码

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

在项目的根目录建立.editorconfig文件，键入以下代码（Vue CLI 已带）

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

至此，即可完成，详细解释请看后面

Vetur

这个插件是 vscode 能优雅写 Vue 的核心，绝对的神器，它的优点：

1. 代码高亮
2. 代码片段
3. Emmet 语法支持
4. 语法错误校验检查
5. 格式化代码
6. 代码提醒
7. 对三方 UI 框架的支持

这里主要说说格式化代码相关，防止和 ESLint 打架。

从官方文档可以看出，Vetur集成了prettier，这就非常棒了。Vetur能够让 *.vue 文件中不同的块使用不同的格式化方案，