Vue.js结合VS Code 启用ESLint

在团队协作中，为了统一代码风格，避免一些低级错误，所以应该制定统一的规范。在Javascript中就是ESLint。下面就介绍如果在VS Code中启用ESLint来规范VUE代码标准。

第一步：
打开 Visual Studio Code ，首先使用快捷键 Ctrl + Shift + P 调出VsCode的控制台，然后输入下面的命令安装ESLint插件：
ext install ESLint

第二步：
全局安装ESLint
npm install eslint -g

第三部：
在VUE项目根目录下创建 .eslintrc.js
代码如下：
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
//禁止直接使用 Object.prototypes 的内置属性
"no-prototype-builtins":0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// 强制使用有效的 JSDoc 注释
"valid-jsdoc": 1,
"space-before-function-paren": 0,
"no-inner-declarations":0,
"no-extend-native":0// 可以使用扩展方法
}
}

第四步：
在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
}