近期公司前端进行代码规范，整理了一套eslint校验规则，如下所示：
rules: {
'no-var': 'error', // 禁止使用var
'prefer-const': 'error', // 建议使用const
'no-const-assign': 'error', // 禁止修改使用const（no-const-assign）声明的变量
'object-shorthand': 'error', // 方法属性值简写
'quote-props': [ 'error', 'as-needed' ], // 只对那些无效的标示使用引号 ''
'no-array-constructor': 'error', // 数组要求字面量赋值
'no-new-object': 'error', // 对象要求字面值创建对象
'array-callback-return': 'error', // 在数组方法的回调中强制执行
quotes: [ 'error', 'single' ], // string 统一用单引号 ''
'prefer-template': 'error', // 建议使用模板字符串
'no-eval': 'error', // 禁止使用eval
'no-useless-escape': 'error', // 不要使用不必要的转义字符
'func-style': 'error', // 用命名函数表达式而不是函数声明
'prefer-rest-params': 'error', // 建议使用rest参数而不是参数
'space-before-function-paren': [ 'error', 'never' ], // 函数前不允许使用空格或
'space-before-blocks': [ 'error', 'always' ], // 块前需要空格
'no-param-reassign': 'error', // 不允许重新分配函数参数
'prefer-spread': 'error', // 建议使用spread语法而不是.apply（）
'prefer-arrow-callback': 'error', // 建议使用箭头函数
'arrow-spacing': 'error', // 箭头函数的箭头前后需要空格
'no-confusing-arrow': [ 'error', {
allowParens: true } ], // 不允许箭头函数与比较混淆
'no-useless-constructor': 'error', // 不允许不必要的构造函数
'no-dupe-class-members': 'error', // 不允许在类成员中使用重复名称
'no-duplicate-imports': [ 'error', {
includeExports: true } ], // 不允许重复导入
'import/no-mutable-exports': 'error', // 不要导出可变的绑定
'import/first': 'error', // import 放在其他所有语句之前
'dot-notation': 'error', // 访问属性时使用点符号
'no-restricted-properties': 'error', // 做幂运算时用幂操作符 **
'no-multi-assign': 'error', // 不要使用连续变量分配
'no-unused-vars': 'error', // 不允许有未使用的变量
eqeqeq: [ 'error', 'always' ], // 使用 === 和 !== 而不是 == 和 !=
'no-case-declarations': 'error', // 不允许在case/default子句中使用词法声明
'no-nested-ternary': 'error', // 三元表达式不应该嵌套，通常是单行表达式
'no-unneeded-ternary': 'error', // 避免不需要的三元表达式
'no-mixed-operators': 'error', // 不允许不同运算符的混合
'nonblock-statement-body-position': [ 'error', 'beside' ], // 强制单行语句的位置
'brace-style': 'error', // 需要大括号样式
'no-else-return': 'error', // 如果if语句都要用return返回，那后面的else就不用写了。如果if块中包含return，它后面的else if块中也包含了return，这个时候就可以把else if拆开
indent: [ 'error', 2, {
SwitchCase: 1 } ], // 强制2个空格
'keyword-spacing': [ 'error', {
before: true } ], // 在关键字前后强制使用一致的间距
'space-infix-ops': [ 'error', {
int32Hint: false } ], // 用空格来隔开运算符
'padded-blocks': [ 'error', 'never' ], // 不要故意留一些没必要的空白行
'array-bracket-spacing': [ 'error', 'never' ], // 方括号里不要加空格
'object-curly-spacing': [ 'error', 'always' ], // 花括号 {} 里加空格
'comma-spacing': [ 'error', {
before: false, after: true } ], // , 前避免空格， , 后需要空格
'key-spacing': [ 'error', {
beforeColon: false } ], // 在对象的属性中， 键值之间要有空格
'no-trailing-spaces': 'error', // 行末不要空格
'no-multiple-empty-lines': 'error', // 避免出现多个空行。 在文件末尾只允许空一行
'no-new-wrappers': 'error', // 不允许基元包装实例
radix: [ 'error', 'as-needed' ], // 需要基数参数
camelcase: [ 'error', {
properties: 'always' } ], // 要求驼峰式命名对象、函数、实例
'new-cap': 'error', // 要求构造函数名称以大写字母开头
'spaced-comment': [
'error',
'always',
{
line: {
markers: [ '/' ],
exceptions: [ '-', '+' ]
},
block: {
markers: [ '!' ],
exceptions: [ '*' ],
balanced: true
}
}
] // 注释规范
}
针对这一套规则，我在项目中试验了一下，发现问题还挺多，700+
随后就进行了一一修改，最终终于清0，强迫症表示很舒服
接下来就总结一下我这一次整改中，一些常遇到的问题：
1.Identifier xxxxxx is not in camel case.
问题描述：意思就是xxxxxx这个没有用驼峰法命名
举例：<img src={default_logo} alt="图标" />像这里的default_logo
解决：命名改成驼峰法就行<img src={defaultLogo} alt="图标" />
2.xxxxxx is never reassigned. Use const instead.
问题描述：意思就是xxxxxx这个定义了但没有被重新赋值，建议用const去定义
举例：let { dispatch } = this.props;像这里的dispatch
解决：改成用const定义就行const { dispatch } = this.props;
3.Do not nest ternary expressions.
问题描述：意思就是不要嵌套三元表达式
举例：type === 'A' ? '商品类型A' : type === 'B' ? '商品类型B' : '商品类型C'
解决：根据代码逻辑，利用if else 或者switch或者其他方式进行拆分
4.Expected a function expression.
问题描述：意思就是建议用命名函数表达式，而不是函数声明
举例：export function func1() {...函数体}'
解决：改成用命名函数export const func1 = () => {...函数体}
5.Assignment to function parameter xxxxxx
问题描述：意思就是不能直接去赋值参数
举例：export const func1 = (value) => { value = xx}'
解决：尽量不要这么做，要做的可以额外定义多一个变量
export const func1 = (value) => { let newValue = value; newValue = xx}'
6. A function with a name starting with an uppercase letter should only be used as a constructor.
问题描述：意思就是一般建议函数的首字母不要大写
举例：<div>{InputDom()}</div>'像这里的InputDom
解决：改成首字母小写就行
7. Expected to return a value in arrow function.
问题描述：意思就是在这个函数内需要有return，常见于map()，filter()这类方法
举例：arr.map(item => { ...函数体 });
解决：看需求，如果真的是有需要返回值的，就return出去。像map这中只是用来遍历数组的话，可以用forEach代替
8.xxxxxx is assigned a value but never used.
问题描述：意思就是xxxxxx这个变量定义了，但是没有使用
解决：删除这些变量
9. Expected !== and instead saw !=. 和 Expected === and instead saw ==.
问题描述：意思就是使用了！= 和 ==
解决：改成！== 和 ===
10. Using target="_blank" without rel=“noopener noreferrer” is a security risk: see https://mathiasbynens.github.io/rel-noopener
问题描述：意思就是如果在a标签中使用了target="_blank"的话，建议加上rel=“noopener noreferrer”，原因是在新打开的页面中可以通过 window.opener获取到源页面的部分控制权，这样不安全，加上rel=“noopener noreferrer”，通用window.opener获取到的就是null了
解决：加上rel="noopener noreferrer"就ok了
11. eval can be harmful.
问题描述：意思就是不要用eval，因为eval()会执行括号内的js，不安全
解决：可以尝试用自定义的函数去实现想要的效果，或者其他方式改写
12. componentWillReceiveProps is deprecated since React 16.9.0, use UNSAFE_componentWillReceiveProps instead
问题描述：意思就是componentWillReceiveProps这个生命周期被重命名了，建议用UNSAFE_componentWillReceiveProps代替
解决：换成UNSAFE_componentWillReceiveProps就ok了
13. Expected a default case.
问题描述：意思就是没有一个defaule case的情况， 出现场景是在switch case的使用
解决：记得使用switch case要在最后面加上default： break；
以上就是我在整理项目时出现频率较多的几种warning和error
然后在修改过程中遇到一些不太好修改的，例如像UNSAFE_componentWillReceiveProps这个违背了驼峰法，针对这些不好修改的，我目前的做法是暂时通过避开检验
下面列了一下避开校验的写法：
1.整个文件不校验
在文件最顶部写上/* eslint-disable */
2.对某个代码块不校验
使用/* eslint-disable */和/* eslint-enable */包起来
/* eslint-disable */
console.log（111）
/* eslint-enable */
2.对某个代码块不校验
使用/* eslint-disable */和/* eslint-enable */包起来
/* eslint-disable */
console.log（111）
/* eslint-enable */
3.对指定的行不校验
有两种方式
一种是console.log(1) // eslint-disable-line;
另外一种是
// eslint-disable-next-line
console.log（1）
4.以上是对所有规则都不校验，那如果只是想针对某个或者某些规则不校验的，就可以在后面单独加上该规则，例如上面说的UNSAFE_componentWillReceiveProps
// eslint-disable-next-line camelcase ...其他规则
UNSAFE_componentWillReceiveProps = () => {}