目前 vscode 的 vue 开发环境还不能做到开箱即用，本文提供一个比较可行的配置，主要关注点是 eslint 和 vetur 两个插件冲突的问题。
首先，Vetur基本上是必不可少的插件了，但是 Vetur 对于前端三剑客(主要是 HTML、JS)的补全做得不是很好。
我之后又安装了一个VueHelper来解决这个问题，不过现在我不推荐使用VueHelper了，我觉得Vue 2 Snippets会更加好。原因如下:
- 补全指令更多。
- 指令还支持 vue 和 jade，而前者仅仅支持 js、ts、html。
vscode 前端开发需要使用的插件
我列了一组插件列表，截止到 2020 年 5 月 15 号，我觉得这些插件值得你安装。
| 插件 | 作用 |
|---|---|
| Auto Rename Tag | 自动同步修改前后标签名 |
| Code Runner | 支持代码部分运行，快速测试 |
| Easy Sass | 一键 Sass 转 Css，对于刚上手 Sass/Scss 的新人可能有用 |
| ES6 Mocha Snippets | 提供 Mocha 测试框架的自动补全 |
| ESLint | 不用我说，请写规范的 JS |
| HTML CSS Support | 提供在 HTML 中写 CSS 的自动补全 |
| jQuery Code Snippets | jQuery 的自动补全 |
| Live Server | 类似雨 debug for chrome，但是更加方便，虽然无法单步调试 |
| Node.js Modules Intellisense | vscode 默认情况下连 Node 的模版都补全不了，用这个吧 |
| Prettier - Code formatter | 最好用的代码格式化工具，几乎支持了前端各种主流语言 |
| Vetur | Vue 开发必备 |
| Vue 2 Snippets | 提供很多方便的 Vue 补全指令 |
| web-extension | 补全 Chrome 插件的 API，开发 Chrome 插件可以考虑 |
| Webpack Snippets | Webpack 语法的自动补全 |
ESLint 配置
回到正题，我们先从 eslint 开始。
为了让 eslint 在.vue文件上起作用，还需要配置 validate:
"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
eslint 的报错比较烦人，有时候也不知道怎么修复，这种情况下，可以尝试开启自动修复。
"editor.codeActionsOnSave": {
// 自动修复eslint
"source.fixAll.eslint": true
},
editor.codeActionsOnSave是在代码保存的时候会触发的事件，"source.fixAll.eslint": true代表了执行了 eslint 的自动修复。
为了方便，我们干脆设置一个自动保存，这样就可以自动保存，不用快捷键保存了，并且从而引发自动修复。
"files.autoSave": "afterDelay",
afterDelay代表每间隔一小段时间之后保存。
更加方便的是，我们可以设置在保存和粘贴代码的时候就做一次格式化。
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
自动保存，保存的时候格式化且能自动修复 eslint。
Vetur 配置
先专门为.vue文件配置一个格式化:
"[vue]": {
// 默认格式化工具
"editor.defaultFormatter": "octref.vetur",
// 在什么时候格式化, Save-保存 Paste-粘贴
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
},
方括号就是针对这们语言的全局编辑器设置。我们可以需要把ectref.vetur作为默认的格式化工具。
解决 Vetur 和 ESLint 不兼容的问题
要是按照上面的配置，估计会有不少报错，因为其实 Vetur 和 ESLint 的一些规范并不兼容。vetur 的格式化并不符合 eslint 的要求。
经测试，格式化是在自动修复的事件之后的，那么在 eslint 修复之后，vetur 才执行格式化，又变回不符合 eslint 的格式。
原因是他默认使用的格式化工具是Prettier，我一开始也觉得这很神奇，Prettier 的默认配置并不完全遵守 ESLint 的默认规范。
我一开始尝试调整 Prettier 的配置，但是我还是太天真了，的确可以解决部分 eslint 的报错，但是还是有一些小地方不行，比如函数名和参数列表之间的空格。
网上给出的方案是使用vscode-typescript，vscode 默认的 ts 格式化组件。
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typescript",
vscode-typescript 当然也不满足 eslint，但是还好可以通过配置来解决。
//不使用句末的分号
"javascript.format.semicolons": "remove",
//函数与参数列表之间添加一个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
// 一行的大小
"printWidth": 80,
// 是否使用单引号
"singleQuote": false,
// 对HTML属性排序
"sortAttributes": true
},
},
我设置了一些语言的默认配置，大部分配置其实使用 prettier 是没问题的，但是 prettier 也不符合 ESLint 的 HTML 规范，所以我把 HTML 部分替换成了 prettyhtml。
Emmet 配置
emmet 这样效率神器要是缺席，实在说不过去。
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
},
我们让 html 的 emmet 作用于 vue-html 和 vue 就好了。
现在可以快乐的开始写 Vue 了。