eslint整改代碼遇到的問題和解決方案

近期公司前端進行代碼規范，整理了一套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 = () => {}