时隔一年了，终于有时间更新文章，今天来聊聊eslint，顺便记录下
1、什么是ESLint
ESLint 是一个流行的 JavaScript 代码质量和风格检查工具，它可以帮助你识别和报告 JavaScript 代码中的模式，这些模式可能是错误，可能是样式问题，或者可能是两者兼有。
2、项目引入ESLint
注：由于各版本差异，现以7.10.0版本为例
| node版本 | 14.16.1 |
| npm版本 | 6.14.12 |
| eslint版本 | 7.10.0 |
- 安装eslint及eslint插件
npm i eslint@7.10.0 babel-eslint@10.1.0 eslint-config-ali@15.1.0 eslint-import-resolver-alias@1.1.2 eslint-plugin-import@2.30.0 eslint-plugin-vue@8.0.3 vue-eslint-parser@9.4.3 --save-dev
- 项目根目录添加.eslintrc.*（包括js、json等）文件，该配置根据ali/vue规则配置，各项目有所差异
{
"root": true,
"env": {
"node": true
},
"plugins": ["vue"],
"extends": ["ali/vue"],
"rules": {
"indent": [2, 4], // 强制使用一致的缩进
"quotes": 0, // 引号 待定
"quote-props": [0, "always"], // 需要在对象字面量属性名称周围加上引号
"semi": 2, // 无分号就报错
"no-console": 1, // console.log警告
"space-before-function-paren": 0, // 函数前空格忽略
"no-useless-escape": 0, // 禁止不必要的转义字符
"no-unused-vars": ["error", { "vars": "local", "args": "none" }], // 有未使用的变量
"no-redeclare": 2, // 禁止变量重新声明
"no-undef": 2, // 禁止使用未声明的变量
"vue/multi-word-component-names": 0, // 驼峰命名规则 老项目不强制但是警告 待定
"vue/require-v-for-key": 2, // v-for添加key
"vue/require-prop-type-constructor": 0, // 建议prop带类型 component需要增加，业务组件无法完全鉴别
"vue/no-unused-components": 2, // 有未使用的组件
"vue/no-mutating-props": 2, // 修改props传值
"vue/no-unused-vars": 2, // 禁止未使用的变量
"no-empty": 2, // 不允许空块语句
"no-dupe-keys": 2, // 不允许对象字面量中的重复键
"vue/no-dupe-keys": 2, // 不允许对象字面量中的重复键
"no-irregular-whitespace": 2, // 禁止不规则空格 无效或不规则的空格会导致 ECMAScript 5 解析器出现问题
"vue/no-use-v-if-with-v-for": 2, // 原则上不允许v-if和v-for同时
"vue/return-in-computed-property": 2, // 原则上需要返回一个值 先查多少量 1处
"import/no-unresolved": 2, // 导入正确解析
"max-len": 0, // 每行最大 该控制为单行最大可现实代码行数，由于统一代码样式所以不强制
"brace-style": 2, // 此规则强制块的大括号样式一致
"no-shadow": 2, // 禁止在外部作用域中声明的隐藏变量的变量声明
"no-nested-ternary": 0, // 规则不允许嵌套三元表达式
"no-var": 0, // 该规则旨在阻止使用 var，并鼓励使用 const 或 let，由于需要使用全局变量的情况是存在的，所以不禁止
"no-lonely-if": 2, // 不允许 if 语句作为 else 块中的唯一语句
"no-loop-func": 2, // 禁止在循环语句中包含不安全引用的函数声明
"no-tabs": 2, // 一些风格指南根本不允许使用制表符，包括在注释中
"no-mixed-operators": 2, // 禁止混合二元运算符
"eqeqeq": 0, // 不用强制要求使用 === 和 !== 由于后端请求数据给出的数据类型不统一需要逐步排查，先警告
"no-param-reassign": ["error", { "props": false }], // 不允许重新分配 function 参数 不符合 先查多少量 29
"no-void": 2, // 禁止 void 运算符 不符合
"no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true } ], // 禁止未使用的表达式
"no-mixed-spaces-and-tabs": 2, // 不允许缩进混合空格和制表符
"array-callback-return": 2, // 在数组方法的回调中强制执行 return 语句
"no-return-assign": 2, // 禁止在 return 语句中使用赋值运算符
"no-sequences": 2, // 禁止逗号运算符
"no-useless-concat": 2, // 禁止不必要的字面或模板字面串联
"no-fallthrough": 2, // 禁止 case 语句的失败
"no-use-before-define": 2, // 禁止在定义变量之前使用变量
"no-multi-assign": 2, // 禁止使用链式赋值表达式
"no-unsafe-negation": 2, // 不允许否定关系运算符的左操作数
"block-scoped-var": 2, // 在定义的范围内强制使用变量
"prefer-const": 2, // 声明后永远不会重新分配的变量需要 const 声明
"import/no-cycle": 0 //eslint扩展包
},
"globals": {
// 不希望被eslint报错的全局变量
"AMap": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"parser": "babel-eslint"
},
"parser": "vue-eslint-parser",
"settings": {
// eslint扩展包 @符号可被解析
"import/resolver": {
"alias": {
"map": [
// 这里参照webpack的别名配置映射
["@", "./src"]
],
// 引用的时候可以忽略后缀
"extensions": [".vue", ".js", ".ts", ".tsx", ".jsx", ".json"]
}
}
}
}
// 3588 errors, 148 warnings
-
项目根目录添加.eslintignore（各自项目有所差异）
-
package.json文件添加命令
"scripts": {
"eslint": "eslint --ext .js,.vue ./",
"eslint-fix": "eslint --ext .js,.vue ./ --fix"
},
- 执行命令
// eslint批量查找 npm run eslint
// 批量修复可修复代码 npm run eslint-fix
3、遇到的问题及解决方案
- node版本与eslint不一致
eslint降到9.x以下版本6.x以上版本
- import导入文件时别名无法被解析导致eslint报错
使用eslint-import-resolver-alias依赖配置
"settings": {
// eslint扩展包 @符号可被解析
"import/resolver": {
"alias": {
"map": [
// 这里参照webpack的别名配置映射
["@", "./src"]
],
// 引用的时候可以忽略后缀
"extensions": [".vue", ".js", ".ts", ".tsx", ".jsx", ".json"]
}
}
}
4、对于eslint的讨论
1、项目引入eslint的必要性
先说个人主观结论，总的来说利大于弊，付出大于回报，对于项目日后的维护有很大好处
2、否需要引入eslint
先说个人主观结论，有必要引入eslint，并配置适合自己项目的规范
5、eslint不推荐写法
1、brace-style（为块强制执行一致的大括号样式）
详情描述eslint.nodejs.cn/docs/latest…
2、不明意义写法
3、no-return-assign (禁止在 return 语句中使用赋值运算符)
4、array-callback-return（在数组方法的回调中强制执行 return 语句）
类似some、map等数组方法需要有一个返回值
5、no-shadow(禁止在外部作用域中声明的隐藏变量的变量声明)
item参数被重复使用，导致后续参数意义不明
6、不允许重新分配 function 参数
对声明为函数参数的变量进行赋值可能会产生误导，并导致令人困惑的行为，因为在不处于严格模式下时，修改函数参数也会改变 arguments 对象。通常，分配给函数参数是无意的，并且表示错误或程序员错误。
7、vue/no-mutating-props（props应该是只读的）
请符合vue组件规范，单项数据流
