简单5步教你vue-cli2老项目配置eslint！_vue cli 更改eslint配置

1.vue版本

项目vue版本号为2.5.16。

2.注意

最开始试的方式是全局安装eslint，然后用eslint --init初始化文件，可是在eslint --init这里卡住了。（盲猜下载的版本不对吧）也不想折腾了，在github上下载了一个现成的vue-cli2的项目，把packpage.json里面的eslint相关依赖拷贝到项目中，然后npm install进行下载。

3.依赖介绍

"babel-eslint": "^8.2.1","eslint": "^4.15.0",    "eslint-config-standard": "^10.2.1",    "eslint-friendly-formatter": "^3.0.0",    "eslint-loader": "^1.7.1",    "eslint-plugin-import": "^2.7.0",    "eslint-plugin-node": "^5.2.0",    "eslint-plugin-promise": "^3.4.0",    "eslint-plugin-standard": "^3.0.1",    "eslint-plugin-vue": "^4.0.0",
1

解释一下以上依赖的用途：

·babel-eslint --是一个解析器，它允许ESLint在Babel转换的源代码上运行。

·eslint-config-standard --是一个标准的ESLint规则检测库，因此只需要安装这个库就可以省去配置ESLint规则。

仅需在.eslintrc中配置以下代码：

module.exports = {  extends: [    'standard'  ]}
1

·eslint-friendly-formatter --为了方便本地规范检查代码，让eslint校验错误显示在终端中。

·eslint-loader --为了对编译前的ES6语法进行检查，eslint-loader规则要优先于babel-loader规则。

·eslint-plugin-import --提供对ES6+ import/export语法的支持，可防止写错文件路径或者引用的变量名。

·eslint-plugin-node --为node准备的eslint规则配置。

·eslint-plugin-promise --es语法promise的eslint最佳配置。

eslint-plugin-standard --对standard的补充。

·eslint-plugin-vue --Vue.js 的官方 ESLint 插件，允许检测.vue中的与

4…配置

4.1在根目录新建文件 .eslintrc.js

module.exports = {    root: true, //是否为根配置文件，否则会从当前目录往上检索    //语法解析器选项    parserOptions: {      parser: 'babel-eslint'    },    //执行环境    env: {      browser: true,    },    //对基础配置进行扩展    extends: [      'eslint:recommended',      'plugin:vue/essential',      'standard'    ],    //插件，插件命名规范是 eslint-plugin- 为前缀      plugins: [      'vue'    ],    //指定全局变量，无视 no-undef 规则    globals: {},    //校验规则在此处配置    rules: {}  }
1

eslint:recommended为eslint的默认校验规则，如不符合需要的规范，可通过eslint官网http://eslint.cn/docs/rules/ 在rules里自行配置。

4.2根目录新建文件 .eslintignore

不需要检测的文件夹在此处配置

/build//config//dist/
1

4.3在webpack.base.conf.js中配置编译规则

rules: [      {        test: /\.(js|vue)$/,        loader: 'eslint-loader',        enforce: 'pre',        include: [ resolve('src'), resolve('test')],        options: {            formatter: require('eslint-friendly-formatter')        }      }]
1

4.4在config/index.js中开启eslint开关

module.exports = {  dev: {    useEslint: true, //eslint开关    showEslintErrorsInOverlay: false, //eslint错误和警告将显示在浏览器中  }}
1

4.5eslint自动修复

1.在vscode扩展配置

点击 文件 > 首选项 > 设置 setting.json

{ // #每次保存的时候自动格式化  "editor.formatOnSave": false,  "eslint.validate": [    "javascript",    "javascriptreact",    "html",    "vue"  ],  // #每次保存的时候将代码按eslint格式进行修复  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true  },}
1

2.在webpack.base.conf.js中配置

rules: [      {        test: /\.(js|vue)$/,        loader: 'eslint-loader',        enforce: 'pre',        include: [ resolve('src'), resolve('test')],        options: {            formatter: require('eslint-friendly-formatter'),            fix: true,//eslint自动修复        }      }    ]
1