vue-cli开发中利用eslint规范前端团队开发代码，并自动格式化部分不匹配eslint的代码

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的设置规则了

posted @ 2020-05-09 15:34  ____chen  阅读(1089)  评论(0)  编辑  收藏  举报