在团队协作中，为了统一代码风格，避免一些低级错误，所以应该制定统一的规范。在Javascript中就是ESLint。下面就介绍如果在VS Code中启用ESLint来规范VUE代码标准。
第一步：
打开 Visual Studio Code ，首先使用快捷键 Ctrl + Shift + P 调出VsCode的控制台，然后输入下面的命令安装ESLint插件：
ext install ESLint
第二步：
全局安装ESLint
npm install eslint -g
第四步：
在package.json中的scripts中增加 结点
"lint": "eslint --ext .js,.vue src"
第五步：修改VS Code的配置文件
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
{
"language": "html",
"autoFix": true
}
]
到这里就可以在VS Code中看到报错了。但是在vue运行的时候，还是没有办法进行eslint规范
第六步：
在build的 webpack.base.conf.js中的modules中的rules最上面的追加
{
test: /.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
}
最后npm run dev 就可以看到有不规范的代码项目是没办法跑的。
PS： 下面附上针对此ESLint的vs code配置文件
{
"editor.codeLens": true,
"editor.fontSize": 17,
"editor.tabSize": 2,
"editor.formatOnSave": false,
"files.associations": {
"*.vue": "vue"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
{
"language": "html",
"autoFix": true
}
],
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": [
"css",
"html",
"less"
]
},
"editor.fontFamily": "Source Code Pro, 'Courier New', monospace",
"files.autoSave": "off",
"editor.insertSpaces": true
}