eslint整改代码遇到的问题和解决方案

纵然是瞬间 提交于 2020-11-15 11:12:21

近期公司前端进行代码规范,整理了一套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 = () => {}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!