背景
之前的老项目，一个人开发，没有加入eslint，现在两个人开发，为了规范格式，故加入eslint
目标
- 通过eslint检测与修复代码格式
- 使用vscode编辑器时，能及时提示，以及自动修复
步骤
- 安装eslint以及相关插件，此处我是本地安装，没有全局安装；如下是参考的vue-cli 2.X构建时选择需要eslint时所加的包，package.json---devDependencies添加如下包；
请勿直接下载最新eslint，[email protected]与[email protected]不兼容，详见下方问题描述
"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",
- 以及 package.json---scripts 添加如下命名，方便在命令行执行npm run lint时检测问题，npm run lint-fix 自动修复能修复的问题，不能自动修复还是要手动修改
"scripts": {
...
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"lint-fix": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs"
},
- 然后在webpack.base.conf.js的rules里添加如下代码，会在dev之前先检测代码，不通过就报错
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
- 根目录添加.eslintrc.js文件 ，standard较严格，先用的eslint默认的规则
// https://blog.csdn.net/CHS007chs/article/details/95486063 配置解释 可参考这个
module.exports = {
root: true,
"env": {
"browser": true,
"es6": true,
"jquery": true, //可处理使用$的报错
"node": true //可处理使用require的报错
},
/**
* 规则继承
* http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
*【】可继承的方式有以下几种
*【】eslint内置推荐规则，就只有一个，即「eslint:recommended」
*【】可共享的配置， 是一个 npm 包，它输出一个配置对象。即通过npm安装到node_module中
* 可共享的配置可以省略包名的前缀 eslint-config-，即实际设置安装的包名是 eslint-config-airbnb-base
*【】从插件中获取的规则，书写规则为 「plugin:插件包名/配置名」，其中插件报名也是可以忽略「eslint-plugin-」前缀。如'plugin:vue/essential'
*【】从配置文件中继承，即继承另外的一个配置文件，如'./node_modules/coding-standard/eslintDefaults.js'
*/
"extends": [
"eslint:recommended",
"plugin:vue/essential", //插件有vue相关的规则
// "standard"
],
/**
* 全局变量
* http://eslint.cn/docs/user-guide/configuring#specifying-globals
* 【】定义额外的全局，开发者自定义的全局变量，让其跳过no-undef 规则
* 【】key值就是额外添加的全局变量
* 【】value值用于标识该变量能否被重写，类似于const的作用。true为允许变量被重写
* 【】注意：要启用no-global-assign规则来禁止对只读的全局变量进行修改。
*/
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"parser": "babel-eslint"
},
"plugins": [
"vue"
],
/**
* 每个规则有【3】个错误级别。
* off或0: 关闭该规则；
* warn或1: 开启规则，使用警告级别的错误，不会导致程序退出；
* error或2: 开启规则，使用错误级别的错误，当被触发的时候，程序会退出。
*/
"rules": {
// 不禁止console
'no-console': 0,
// 禁止出现未使用的变量
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'//不检测参数
}],
}
};
- 到此即可使用npm run lint-fix来修复部分格式问题了，以下是结合vscode做提示和保存自动修复
-
vscode搜索安装eslint和vetur插件
vscode搜索安装eslint和vetur插件.png
- 配置user settings首选项
配置user settings首选项.png
"eslint.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run": "onType",//onType 是在输入的时候; onSave 是在保存的时候检测
"eslint.autoFixOnSave": true //是否在保存时自动修复
问题
版本问题
- 一开始直接下载最新的 npm i eslint eslint-plugin-vue -D 然后vscode执行的时候报错；
[email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
- 就折腾全局安装，本地安装，都是一样报错，然后刚好我的npm有问题，不能更新，就以为是npm导致的，然后想办法把npm更新到最新6.11.3，还是不行
- 就回过头看报错信息
You must install peer dependencies yourself 您必须自己安装对等依赖项
- 感觉是版本问题，然后看了下eslint版本是6.4.0，eslint-plugin-vue版本是5.2.3
- 然后固定版本npm i -D [email protected]
- 就可以了
参考
- 怎样在vue项目下添加ESLint
- 记为vue添加eslint过程，采用airbnb规范
- ESlint配置文件eslintrc.js
- 记住这 5 点，快速做出一张美观的标注配图