eslint - 代碼規範性問題集錦

目錄

前言

類型一、Expected '===' and instead saw '=='

類型二、Use '!==' to compare with null

類型三、'*' was used before it was defined

類型四、 '*' is defined but never used

類型五、Unexpected negated condition

類型六、 '*' is not defined

類型七、Unexpected mix of '/' and '-'

類型八、Unexpected string concatenation of literals

類型九、Expected '===' and instead saw '=='

類型十、'*' is already declared in the upper scope

類型十一、This line has a length of *. Maximum allowed is 120

類型十二、Function declared in a loop contains unsafe references to variable(s)

---

---

前言

最近爲了規範化代碼風格，項目組內啓用了VSCode插件eslint，瞭解eslint的同學都知道，它是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，給出一些代碼規範建議，其目的是爲了保證代碼的一致性和避免一些可能出現的錯誤。 都有 

類型一、Expected '===' and instead saw '=='

提示警告的波浪線如下圖所示： 

報錯的意思是應該使用“===”代替“==”，具體警告信息：

{
	"resource": "/g:/project/*/main.js",
	"owner": "eslint",
	"code": {
		"value": "eqeqeq",
		"target": {
			"$mid": 1,
			"external": "https://eslint.org/docs/rules/eqeqeq",
			"path": "/docs/rules/eqeqeq",
			"scheme": "https",
			"authority": "eslint.org"
		}
	},
	"severity": 8,
	"message": "Expected '===' and instead saw '=='.",
	"source": "eslint",
	"startLineNumber": 783,
	"startColumn": 27,
	"endLineNumber": 783,
	"endColumn": 29
}

其中，指明瞭警告的位置，包括行號，列號，範圍等信息。修改後如下圖所示，警告波浪線消失：

類型二、Use '!==' to compare with null

提示警告的波浪線如下圖所示：  

 警告的意思是應該使用“!==”去和null做判斷，修改後如下圖所示，警告波浪線消失：

類型三、'*' was used before it was defined

實例：'mainWindow' was used before it was defined.

提示警告的波浪線如下圖所示：  

警告的意思是應該某個對象在它正式定義之前就被違規使用了，具體警告信息：

{
	"resource": "/g:/project/*/main.js",
	"owner": "eslint",
	"code": {
		"value": "no-use-before-define",
		"target": {
			"$mid": 1,
			"external": "https://eslint.org/docs/rules/no-use-before-define",
			"path": "/docs/rules/no-use-before-define",
			"scheme": "https",
			"authority": "eslint.org"
		}
	},
	"severity": 8,
	"message": "'mainWindow' was used before it was defined.",
	"source": "eslint",
	"startLineNumber": 204,
	"startColumn": 9,
	"endLineNumber": 204,
	"endColumn": 19
}

解決方法是調整代碼順序，修改後如下圖所示，警告的波浪線消失：

類型四、 '*' is defined but never used

 提示警告的波浪線如下圖所示：  

 

警告的意思是某些對象被定義了，但是沒有被使用到。解決方式是去掉沒有必要的聲明對象 ，修改後如下圖所示，警告的波浪線消失：

類型五、Unexpected negated condition

 提示警告的波浪線如下圖所示：  

警告的意思是不正常的判斷形式，mPenOpen可以直接作爲一個判斷條件，而不用多此一舉加個“!”非運算符， 修改後如下圖所示，警告的波浪線消失：

類型六、 '*' is not defined

 提示警告的波浪線如下圖所示：  

警告的意思是某些對象沒有定義就被使用了，解決方式是正式聲明這些對象， 修改後如下圖所示，警告的波浪線消失：

類型七、Unexpected mix of '/' and '-'

 提示警告的波浪線如下圖所示：  

警告的意思是不用運算符混合使用了，解決方法是使用小括號明確運算過程的優先級。修改後如下圖所示，警告的波浪線消失：

類型八、Unexpected string concatenation of literals

 提示警告的波浪線如下圖所示：   

警告的意思是異常的字符串連接方式，修改後如下圖所示，警告的波浪線消失：

類型九、Expected '===' and instead saw '=='

 提示警告的波浪線如下圖所示：    

警告的意思是建議使用“===”代替“==”，修改後如下圖所示，警告的波浪線消失： 

類型十、'*' is already declared in the upper scope

 提示警告的波浪線如下圖所示：    

警告的意思是該變量名之前被定義了，此處屬於重複定義，修改後如下圖所示，警告的波浪線消失：  

類型十一、This line has a length of *. Maximum allowed is 120

 提示警告的波浪線如下圖所示：    

警告的意思是某行代碼長度超過了最大值限制，具體內容如下所示：

{
	"resource": "/g:/project/*/main.js",
	"owner": "eslint",
	"code": {
		"value": "max-len",
		"target": {
			"$mid": 1,
			"external": "https://eslint.org/docs/rules/max-len",
			"path": "/docs/rules/max-len",
			"scheme": "https",
			"authority": "eslint.org"
		}
	},
	"severity": 8,
	"message": "This line has a length of 402. Maximum allowed is 120.",
	"source": "eslint",
	"startLineNumber": 98,
	"startColumn": 1,
	"endLineNumber": 98,
	"endColumn": 1
}

 解決方式有兩種，方法一是明確允許該行代碼超出最大長度限制，如下圖所示：

方法二是折行處理這段代碼，同時使用eslint-disable-next-line no-multi-str聲明，具體如下圖所示：

類型十二、Function declared in a loop contains unsafe references to variable(s)

警告⚠️：Function declared in a loop contains unsafe references to variable(s) 'count'.

提示警告的波浪線如下圖所示： 

解決方式使用eslint-disable-next-line no-loop-func明確聲明知道這樣的操作行爲，修改後如下圖所示，警告的波浪線消失：