eslint - コード仕様に関する質問集

目次

前書き

タイプI：'===='を期待したのに、'==='と表示された。

タイプII、nullと比較するために'!

タイプ III、'*' は定義される前に使用されました。

タイプ4、'*'は定義されているが使われたことはない

タイプV：予期しない否定条件

タイプVI、'*'が定義されていない

タイプ VII. '/'と'-'の予期せぬ混在

タイプVIII, リテラルの予期せぬ文字列連結

タイプIX, '===='を期待したのに '==='と表示された。

タイプ X. '*' は上位スコープで既に宣言されている

タイプxi。この行の長さは*です。最大許容値は120

タイプ XII ループ内で宣言された関数が変数への安全でない参照を含んでいる。

---

---

前書き

最近、コードスタイルの標準化のため、プロジェクトチーム内でVSCodeプラグインのeslintを有効化しました。eslint は ECMAScript/JavaScript コードのパターンマッチを識別して報告するツールで、コードの一貫性を確保し、起こりうるエラーを回避するために、いくつかのコード仕様の提案を行うことは、eslint を理解している学生なら知っていることでしょう。 両者とも 

タイプI：'===='を期待したのに'==='になってしまった。

警告を促す波線は以下のとおりです。 

このエラーは、"=="の代わりに"==="を使うべきだという意味で報告され、次のような具体的な警告メッセージが表示されます。

{
	"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
}

で、行番号、列番号、範囲などの警告の発生場所を指定します。下図のように修正すると警告の波線は消えます。

タイプII。nullとの比較には「！==」を使用

警告を促す波線は以下の通りです。  

 この警告は、" を使いなさいということです! =="でnullと判断すると、以下の画像のように警告の波線が消えます。

タイプIII。'*'が定義される前に使用された

例：'mainWindow'が定義される前に使用された。

警告を促す波線は以下のとおりです。  

警告は、オブジェクトが正式に定義される前に違反して使用されるべきであることを意味し、次のような警告メッセージが表示されます。

{
	"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
}

解決策は、コードの順番を変更することで、変更後は次の画像のように警告の波線が消えます。

タイプIV。'*'は定義されているが、決して使用されない

 警告を促す波線は以下の通りです。  

この警告は、いくつかのオブジェクトが定義されているが、使用されていないことを意味します。解決策としては、以下のように不要な宣言オブジェクトを削除することで、警告の波線が消えます。

タイプV：予期しない否定的条件

 警告を促す波線は以下のとおりです。  

警告は異常な判定を意味するもので、mPenOpenは"!"という非演算子を付けなくても直接判定条件として使えるので、以下の画像のように警告の波線は消えます。

タイプVI。'*' が定義されていない

 警告を促す波線は以下の通りです。  

この警告は、いくつかのオブジェクトが定義されずに使用されていることを意味します。解決策としては、次の画像のように正式に宣言することで、警告の波線は消えます。

タイプVII '/'と'-'の予期せぬ混在

 警告を促す波線は以下のとおりです。  

この警告は、演算子を混在させる必要はないという意味であり、解決策としては、括弧を使用して手順の優先順位を明確にすることです。変更後は下図のように警告の波線は消えます。

タイプ VIII. リテラルが予期せぬ文字列連結をした

 警告を促す波線は以下のとおりです。   

警告は異常な文字列の連結を意味し、以下のように警告の波線が消えるように修正されます。

タイプIX。期待された'===='の代わりに'==='が表示されました。

 警告を促す波線は以下のとおりです。    

この警告は、"=="の代わりに"==="の使用を促すもので、以下の画像のように警告の波線が消えるように修正されています。 

xを入力。'*'は上位スコープで既に宣言されている。

 警告を促す波線は以下のとおりです。    

警告は、その変数名が以前に定義されていたことを意味し、ここでは重複定義となり、以下のように警告の波線は消えます。  

XI型。この行の長さは*です。最大許容値は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
}

 これを解決する方法は2つあります。1つは、以下のように、コードの行が最大長の制限を超えることを明示的に許可することです。

2つ目の方法は、次の画像に示すように、コードを折り畳んでeslint-disable-next-line no-multi-str宣言を使用する方法です。

タイプXII ループ内で宣言された関数が変数への安全でない参照を含んでいる。

警告 ⚠️です。ループ内で宣言された関数が変数 'count' への安全でない参照を含んでいます。

警告を促す波線は以下のとおりです。 

この解決策では、eslint-disable-next-line no-loop-funcを使って、このような操作の挙動を認識していることを明示的に宣言し、変更後は以下のように警告の波線が消えます。