Zenn
💨

ESLintの使い方

2022/07/18に公開
ESLint
tech
.eslintrc
{
	"env": {
		"es6": true,
		"browser": true
	},
	"extends": "eslint:recommended",
	"rules": {
		"no-console": "off",
		"no-unused-vars": "off"
	}
}

このファイルは三つのパーツが定義されています："env"、"extends"、"rulesと分けられています

env

envは基本環境を定義しています

extends

すでに書かれていた他の人の設定を借ります

eslint:recommended

もしeslint:recommendedを使うなら、何もインストールする必要なく、そのまま書けば使えます

airbnb

もしairbnbのような外部設定を使いたいなら、以下の手順を踏まえて使います

まずはインストールのコマンドをチェック

npx install-peerdeps --dev eslint-config-airbnb

これを打ったらこんなものが返します

npm install eslint-config-airbnb@19.0.4 eslint@^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react@^7.28.0 eslint-plugin-react-hooks@^4.3.0 --save-dev

そして、sudoを加えてターミナルに打ちます

sudo npm install eslint-config-airbnb@19.0.4 eslint@^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react@^7.28.0 eslint-plugin-react-hooks@^4.3.0 --save-dev

最後に.eslintrcのextendsを「airbnb」を記入します

.eslintrc
-"extends": "eslint:recommended",
+"extends": ["eslint:recommended", "airbnb"],

varを使ってみます（airbnbが禁止とされている書き方）

bad-code.js
var [a, b] = [123, 1234];

見事にエラーになってしまいました

rules

extendsが固められた設定を上書きします

グローバル変数の排除

外部ライブラリを使ってみます

bad-code.js
ga.track();
twttr.trackConversion();

ESLintがエラーになってしまいました

解決法はJSファイルの最上部にチェック排除してほしいグローバル変数を入れます

bad-code.js
+/* globals twttr ga */

ga.track();
twttr.trackConversion();

これで正常になりました

Polyfill

includes()のPolyfillを使ってみます

（MDNからPolyfillの段落をJSファイルを貼ります）

bad-code.js
if (!Array.prototype.includes) {
	Object.defineProperty(Array.prototype, 'includes', {
	...
	省略
	...

そうしたらESLintが真っ赤になりました
prototypeに対する属性の追加は禁止とされていますので

解決法は、ファイル丸ごろにESLintから無視されてほしいというコメントを追加します

bad-code.js
+/* eslint-disable */

if (!Array.prototype.includes) {
	Object.defineProperty(Array.prototype, 'includes', {
	...
	省略
	...

あるいはエラーになっている部分だけ書くのもOKです

この青い文字の部分を取り上げて書きます

bad-code.js
+/* eslint-disable no-extend-native, object-shorthand, vars-on-top, no-var, no-bitwise, operator-linebreak, max-len, no-restricted-globals, no-plusplus, func-names  */

if (!Array.prototype.includes) {
	Object.defineProperty(Array.prototype, 'includes', {
	...
	省略
	...

ESLintのプラグイン

eslint-plugin-jsdocというプラグインを使ってみます
このプラグインを利用して、JSDocを検査することができます

まずはインストール

sudo npm i eslint-plugin-jsdoc

そして、.eslintrcに追加します
全てのJSDocに@exampleを記入することを求めるようにします

.eslintrc
{
	"env": {
		"es6": true,
		"browser": true
	},
	"extends": "airbnb",
	"rules": {
		"no-console": "off",
		"no-unused-vars": "off",
		"no-unused-let": "off",
		"no-unused-const": "off",
		"indent": ["error", 4],
		"jsdoc/require-example": "warn"
	},
+	"plugins": ["jsdoc"]
}


警告が予想通りに出ました、これでOKです

ファイルをESLintのチェックから排除

.eslintignoreというファイルを作ります
ワイルドカードの記し方でファイルの種類を定義します

*.js
*.html

上のように、全てのjsファイルとhtmlファイルがESLintのルールから排除されました

ESLintとPrettierがConflictした時

Prettierのカスタム設定はESLintよりかなり少ないので
Prettierがオートフォマットをした後に、ESLintエラーになる場合もあります

例えばairbnbのESLintとPrettierを同時に導入し

ESLintの設定はこうです

.eslintcrc
{
	...
	"extends": ["airbnb"]
}

そして、このようなReact Componentを書いたら

Sample.js
function Sample() {
	const a = 2;
	const arr = [1, 2, 3, 4, 5, 6, 7];

	return (
		<div>
			<div>hey</div>
			<div>hey</div>
			<div>hey</div>
			<div>hey</div>
			{a === 2 &&
				arr.filter((item) => item > 0).map((item) => `<div>${item}</div>`)}
		</div>
	);
}

&&の後ろに改行を入れたら
このようにESLintエラーになってしまいます

逆に改行入れないことにしたら

Prettierのオートフォマット機能があるので、セーブしたらまた改行を入れてしまいました

上のようなエラー不可避な状態になってしまいました

解決

そこでESLintのプラグインeslint-config-prettier
を利用して、Prettierルールと衝突あるESLintルールを一斉に禁止させます

まずはインストール

npm install --save-dev eslint-config-prettier

そして、ESLintの設定に加えます

.eslintcrc
{
	...
-	"extends": ["airbnb"]
+	"extends": ["airbnb", "prettier"]
}

そうしたら&&のESLintエラーがなくなります

Discussion