ESLint の使い方

自動インストールでは、設定ファイルの自動作成と、必要なパッケージのインストール（必要であれば）を行ってくれます。 使用するコーディング規約などによって必要なパッケージが変わります。 1つ1つ手動でインストールしていくのは面倒なので、自動インストールがオススメです。

自動インストールを行うには、下記のコマンドを実行します。 このコマンドを実行すると、どのような環境なのか質問されますので答えましょう。 全て答え終わると ESLint がインストールされ、ESLint の設定ファイル「.eslintrc.*」が作成されます。

npm init @eslint/config

手動でインストールした場合は、ESlint の設定ファイルが作成されませんので、自分で作成する必要があります。 設定ファイルが無い状態で ESlint を実行するとエラーになるので注意してください。 設定ファイルの詳しい説明については後述します。

手動インストールを行うには、下記のコマンドを実行します。 基本的には開発環境で使うツールだと思いますので、--save-dev オプションを付けておきましょう。 npm の使い方がわからないという方は、まずは「Node.js と npm の使い方（その１：概要）」を参考にしてください。

npm install --save-dev eslint

ESlint をインストールすると、eslint コマンドが使えるようになっています。 下記のコマンドを実行してバージョン番号が表示されれば、ちゃんとインストールできています。

なお、コマンドは "./node_modules/.bin" にインストールされます。 コマンドが見つからない場合は、"./node_modules/.bin" に PATH を通しておくか、 相対パスで "./node_modules/.bin/eslint" と指定するか、 もしくは npx コマンドを使用するなどの対応を行ってください。 この記事では、説明の簡略化のために "./node_modules/.bin" に PATH を通してあることを前提として説明していきます。

eslint --version

eslint コマンドの詳しい使い方が知りたい場合は、ヘルプを表示してみましょう。

eslint --help

コーディング規約に違反している個所や問題がある個所を検出したい場合は、 eslint コマンドに、検査したいファイル名もしくはディレクトリ名を指定します。 ファイル名もしくはディレクトリ名は、スペース区切りで複数指定できます。

eslint ./src/hoge.js

eslint ./src ./tests

コーディング規約に違反している個所や問題がある個所を正しいコードに自動修正したい場合は、 eslint コマンドに、--fix オプションを付けて実行します。 ファイル名もしくはディレクトリ名は、スペース区切りで複数指定できます。

eslint --fix ./src/hoge.js

eslint --fix ./src ./tests

設定ファイルを使用する方法は3つあります。

{
	"name": "demo-app",
	"version": "1.0.0",
	"devDependencies": {
		"eslint": "^29.3.1"
	},
	"eslintConfig": {
		"extends": "eslint:recommended"
	}
}

eslint -c config.json ./src

eslint --no-eslintrc -c config.json ./src

ESLint の設定ファイルは、手動で作成することもできますが、自動で作成してくれる機能もあります。

自動で作成するには、eslint コマンドに --init オプションを付けて実行します。 これは、自動インストール時の npm init @eslint/config を実行した際に行われるものと同じものです。 ESLint の設定をやり直したい場合には便利かもしれません。

eslint --init

どんな設定項目があるかは、ここでは記載しません。 大量にありますので、公式のドキュメントを見てもらった方が良いと思います。

• Configuring ESLint - ESLint - Pluggable JavaScript Linter

ここでは簡単な例だけ記載しておきます。

module.exports = {
	"extends": "eslint:recommended"
};

動作環境の設定をするには、設定ファイルで env 項目を使用します。

設定できる値は、ここでは記載しません。 大量にありますので、公式のドキュメントを見てもらった方が良いと思います。 どの値を設定すれば良いかわからない場合は、前述の自動インストールを使用しましょう。

• Language Options - ESLint - Pluggable JavaScript Linter

module.exports = {
	"env": {
		"browser": true,
		"es2021": true,
		"jquery": true,
		"jest": true
	}
};

もし、上述の env では未サポートのライブラリやフレームワークなどで、グローバル変数を使用している場合は、 そのグローバル変数を globals 項目に追加すると、エラーとして指摘されなくなります。

書き込み可能な変数は writable、読み込み専用の変数は readonly という値を指定します。

module.exports = {
	"env": {
		"browser": true,
		"es2021": true
	},
	"globals": {
		"jQuery": "readonly",
		"$": "readonly"
	}
};

1つ目の方法は、JavaScript のコメントでルールを記載する方法です。 この方法を使用すると、適用されるルールを、任意のファイルの任意の個所でピンポイントに変更することができます。 しかしながら、ソースコードがコメントで汚れてしまうというデメリットがあります。 後述の設定ファイルを使用した方が良いでしょう。

用途としては、違うコーディング規約で開発された JavaScript ファイルを組み合わせて使用したい場合などでは便利かもしれません。 例えば、複数の会社で作成したモジュールを組み合わせて使用したりする場合などです。

詳しいコメントの書き方は、公式のドキュメントを参照してください。

• Rules - ESLint - Pluggable JavaScript Linter

/* eslint indent: ["error", "tab"], linebreak-style: ["error", "unix"] */
function sum(a, b) {
	return a + b;
}

eslint --no-inline-config ./src

module.exports = {
	'extends': 'eslint:recommended',
	'noInlineConfig': true
};

2つ目の方法は、設定ファイルで rules 項目を使用する方法です。 rules 項目に適用したいルールの一覧を記述します。

どんなルールが使用できるかは、ここでは記載しません。 大量にありますので、公式のドキュメントを見てもらった方が良いと思います。

• Rules - ESLint - Pluggable JavaScript Linter

module.exports = {
	'extends': 'eslint:recommended',
	'rules': {
		'indent': ['error', 'tab'],
		'linebreak-style': ['error', 'unix']
	}
};

eslint-watch をインストールするには、下記のコマンドを実行します。 基本的には開発環境で使うツールだと思いますので、--save-dev オプションを付けておきましょう。 npm の使い方がわからないという方は、まずは「Node.js と npm の使い方（その１：概要）」を参考にしてください。

npm install --save-dev eslint-watch

eslint-watch をインストールすると、esw コマンドが使用できるようになります。

監視を実行するには、esw コマンドに --watch オプションを付けて実行します。 --watch オプション には、エイリアス（別名） -w オプションがあります。 さらに自動修正も行いたい場合は、--fix オプションを付けて実行します。 色が付かない場合は、--color オプションを追加してください。

監視をやめる場合は、Ctrl + C を押せば終了できます。

esw -w --color ./src ./tests

esw -w --fix --color ./src ./tests

npm run lint

オプションを追加したい場合は、-- で繋ぐと追加できます。

npm run lint -- --fix