vscode编写统一风格的vue代码

vue项目设置

使用vue-cli生成项目，选择使用eslint，编码风格为standrad。
打开.eslintrc.js文件，在rules中添加'space-before-function-paren': 0,，关闭函数括号前的空格验证。

// 关闭前，必须为如下格式
function fn () {}
// 关闭后，如下格式也可以
function fn() {}

vscode插件安装与设置

搜索安装vetur、prettier插件。Ctrl+Shift+P 搜索Setting首选项设置修改设置如下：

  "editor.formatOnSave": true, // 编辑器保存自动格式化
  "prettier.semi": false, // 语句结束不添加分号
  "prettier.singleQuote": true // 字符串使用单引号

设置完成，重新加载vscode即可，此时js文件与vue文件保存会自动格式化，编程风格也可以通过eslint的校验。

设置说明

1. 在eslint中添加'space-before-function-paren': 0,是因为，prettier没有这个选项，所以直接去掉，而这个选项其实也并没有什么影响。
2. 设置prettier即可实现vue与js的保存格式化，是因为vetur（新版），格式vue中的js默认使用的就是prettier，有些人更新vetur，eslint（未修改）报错，就是因为这个原因，可以通过修改"vetur.format.defaultFormatter.js": "prettier",来避免报错。
3. eslint有prettier相关的插件，如果不愿修改prettier设置或喜欢prettier默认编码风格的可以使用，按照自己喜欢的编码风格配置eslint与prettier设置即可。

相关资料：
eslint中文文档
vetur github
prettier github
prettier介绍