Eslint30条规则问题解决方案(ts+react-native)

eslint规范目前是前端团队写代码，一个很好的规范，开发项目时，大家都遵守该规范，对以后项目代码的维护与可读性有极大的好处，本文讲一下博主遇到的各类Eslint问题与相应的解决方案。

1. react/destructuring-assignment(解构)

这条规则需要用解构的方法取值，如：

1	`const name = this.props.name`

需要修改成

1	`const {name} = this.props`

2.no-unused-vars(无用的定义)

确定无用可以删除

3.react-native/no-inline-styles(不许有行内样式)

如：

1	`<span style={{color: 'red'}}>hello</span>`

类似这种有行内样式的地方需要修改，可以这样改：

1
2
3

const spanStyle={color: 'red'}
...
<span style={spanStyle}>hello</span>

或者在react-native中这样修改

import { StyleSheet } from '@mrn/react-native'
const styles = StyleSheet.create({
    spanStyle: {
    	color: 'red'
    }
})
...
<span style={styles.spanStyle}>hello</span>

4.object-curly-newline

该规则需要在某些地方新加空行，比如文件的末尾需要有空行，import的最后需要有空行，加上就好

5.@typescript-eslint/camelcase’: ‘error’,

该规则需要使用驼峰命名法，一般发生在有这样命名变量的文件中，比如命名为card-name需要改成cardName
但是，一定要注意，项目中有一些和后端对齐的参数也是用a-b的方式命名，比如已经统一好对接的参数是param-id,你修改成paramId可就麻烦了，请求不到后端的数据造成bug，会挨骂的
所以这种时候怎么解决呢？加单引号包裹'param-id'就ok
还有一种情况，data.param-id怎么处理呢，我也是想了好多办法，data[param-id],data['param-id']都行不通，没办法，禁用一下规则吧eslint ignore nextline,不要乱用规则禁用哦，用的多了也会挨骂

6.@typescript-eslint/member-delimiter-style’: ‘error’,

一般是某个地方少加了最后的’:’或者’,’添加上就好了

7.react-native/no-unused-styles’: ‘error’,

该规则检测出没用到的style，直接删除即可

8.react/jsx-closing-tag-location’: ‘error’,

该规则需要标签首尾对齐，多发生在三元表达式中，因为？和：影响布局，如：

//before
const state = condition ? <div>
		<span>x</span>
		<button>x</button>
	<div> : <div>
		<span>y</span>
		<button>y</button>
	<div>
//after
const state = condition ? (
	<div>
		<span>x</span>
		<button>x</button>
	<div>) : (
	<div>
		<span>y</span>
		<button>y</button>
	<div>)

总之，我遇到的大多数情况都是通过加()解决排版问题，只要让标签首尾对齐就ok

9.consistent-return’: ‘error’,

需要有返回值，如果是在map函数中，没有返回值，可以考虑改成forEach，如果是在函数中可以考虑加兜底返回，比如

1
2
3

return null
return undefined
return ''

10.react/jsx-curly-spacing’: ‘error’,

该规则一般发生在括号附近，把括号加上就好，如：

//before
const {a} = props
//after
const { a } = props

11.react/jsx-no-bind’: ‘error’,

不允许用bind，该类规则改动很复杂，需要与项目负责人协商是否改动

12.no-multi-spaces’: ‘error’,

不允许无用的多余的空格，按照提示删除即可

13.react/jsx-props-no-multi-spaces’: ‘error’,

不允许无用的多余的空格，按照提示删除即可

14.import/no-cycle’: ‘error’,

该规则禁止循环引用，如a文件引用了b文件的模块，b文件也引入了a文件的模块，这是很不好的，但是该类规则改动很复杂，需要与项目负责人协商是否改动

15.no-mixed-operators’: ‘error’,

不可混用操作符，一般发生在&&和||附近，如:

//before
data && data.mccConfigVOList || []
//after
(data && data.mccConfigVOList) || []

改动方法一般是把与操作符两边加上小括号

16.no-shadow’: ‘error’,

该类错误意思是上方定义过这个名字的变量，希望你重新命名，为了更好的维护代码，否则过后看这项目的代码，很多相同命名的变量会看哭的

17.@typescript-eslint/indent’: ‘error’,

缩进问题，按照提示改就好

18.react/jsx-closing-bracket-location’: ‘error’,

标签对齐问题，看代码就懂了

//before
<Say
  firstName="John"
  lastName="Smith"
  >
  Hello
</Say>
//after
<Say
  firstName="John"
  lastName="Smith"
>
  Hello
</Say>

19.import/order’: ‘error’,

import的顺序按照提示更改即可

20.react/jsx-indent-props’: ‘error’,

缩进问题，按照提示改就好

21.@typescript-eslint/restrict-plus-operands’: ‘error’,

该规则希望+左右两边是相同的类型，但是你需要确定类型是什么，然后加上强制类型转换，如：

//before
const param = a + 1
//after
const param = Number(a) + 1//假设知道类型是nuimber
const param = String(a) + 1//假设知道类型是string

22.react/no-deprecated’: ‘error’,

不许用已经废弃的函数、方法、组件等，一般不会出现

23.no-nested-ternary’: ‘error’,

该规则不允许嵌套三元运算符，如：

//before
const param = condition1 ? a : condition2 ? b : c
//after
const t = condition2 ? b : c
const param = condition ? a :t

改动方法就是把嵌套的部分提取出一个三元表达式，变成两个三元就ok

24.prefer-const’: ‘error’,

该规则会检测let定义的变量在项目中有没有发生过变化，若检测到没有发生过变化，eslint希望你用const定义，如：

//before
let param = props.data
//after
const param = props.data

25.@typescript-eslint/class-name-casing’: ‘error’,

26.prefer-template’: ‘error’,

需要把字符串改成模板字符串，如：

//before
const str = 'hello' + {param} + '#'
//after
const str = `hello${param}#`

注意普通字符串是单引号\双引号包裹，模板字符串是反引号包裹

27.react/no-array-index-key’: ‘error’,

该规则不允许把index用作key，如：

//before
array.map((item,index)=><li key={index}>{item.content}</li>)
//after
array.map((item,index)=>{
	const uniqueKey = index
	return (<li key={unique}>{item.content}</li>))
}

把index提一下就好，个人感觉该规则有些鸡肋

28.@typescript-eslint/member-ordering’: ‘error’,

按照提示改变顺序即可

29.indent’: ‘error’,

这里多是空格或者缩进的错误，找到报错位置按照报错信息改动即可

30.no-console’

这个容易，遇到console删除就好，但是要注意整个逻辑有没有变动

//before
console.log('any')
//after
debugLog(e || '')

XING JIA QI

Eslint问题解决方案