1.在项目主目录下的.eslintrc.js中 没有该文件需要新建一个该文件 代码如下，团队可自行定义如下eslint的规则
1 // https://eslint.org/docs/user-guide/configuring 2 3 module.exports = { 4 root: true, 5 parserOptions: { 6 parser: 'babel-eslint' 7 }, 8 extends: ['plugin:vue/essential', 'plugin:prettier/recommended', 'eslint:recommended'], 9 env: { 10 node: true, 11 es6: true, 12 browser: true 13 }, 14 rules: { 15 'no-console': 0, 16 'no-debugger': 0, 17 'no-unused-vars': 0, 18 'no-useless-escape': 0, 19 'no-multiple-empty-lines': [ 20 2, 21 { 22 max: 3 23 } 24 ], 25 'prettier/prettier': [ 26 'error', 27 { 28 singleQuote: true, 29 semi: true, 30 trailingComma: 'none', 31 bracketSpacing: true, 32 jsxBracketSameLine: false, 33 insertPragma: true, 34 requirePragma: false 35 } 36 ] 37 } 38 }
2.检查package.json中 是否包含了 eslint的相关插件 需要的插件如下
1 "eslint": "^5.2.0", 2 "eslint-config-prettier": "^3.3.0", 3 "eslint-friendly-formatter": "^4.0.1", 4 "eslint-loader": "^2.1.0", 5 "eslint-plugin-prettier": "^3.1.1", 6 "eslint-plugin-vue": "^5.0.0",
如没有这些依赖 需要执行npm install eslint...安装下载相关依赖
3.检查主目录下的 build文件夹下的webpack.base.conf.js文件 中 createLintingRule 这个方法 中 是否如下设置 ，如不是请修改设置如下：
1 const createLintingRule = () => ({ 2 test: /.(js|vue)$/, 3 loader: 'eslint-loader', 4 enforce: 'pre', 5 include: [resolve('src'), resolve('test')], 6 options: { 7 formatter: require('eslint-friendly-formatter'), 8 emitWarning: !config.dev.showEslintErrorsInOverlay, 9 fix:true 10 } 11 })
4.重启项目 这个时候就会发现 一些不规范的的代码会自动格式化为 eslint的设置规则了