Blog2026.04.11

コードの品質を自動でチェック！ESLint 入門ガイド

ESLint とは？
ESLint が見つけてくれる問題の例
インストール方法
初期設定ファイルを作成する
基本的な使い方
コマンドラインで実行する
VS Code でリアルタイムにチェックする
設定ファイルの書き方
ルールの重要度は3段階
よく使うルールの例
共有設定（Shareable Config）を使う
TypeScript で使う場合
特定のファイルを除外する
Prettier との併用
package.json にスクリプトを登録する
まとめ

「動くけど、なんだか読みにくいコード」を書いてしまった経験はありませんか？使っていない変数、到達しない条件分岐、意図しない型変換――こうした問題を自動で見つけてくれるのが ESLint です。

この記事では、ESLint の基本的な役割から導入方法、ルールの設定方法までをまとめて紹介します。

ESLint とは？

ESLint は JavaScript / TypeScript 向けの 静的解析ツール（リンター） です。コードを実行する前に潜在的な問題を検出し、警告やエラーとして教えてくれます。

ESLint が見つけてくれる問題の例

バグになりうるコード ― 未使用の変数、定義前の参照、=== と == の混同など
可読性の低いコード ― ネストが深すぎる条件分岐、一貫性のない命名など
非推奨な書き方 ― var の使用、arguments オブジェクトの直接操作など

Prettier が「見た目」を整えるツールだとすれば、ESLint は「中身の品質」を守るツールです。この2つを組み合わせて使うのが現在の主流になっています。

インストール方法

npm または yarn でプロジェクトにインストールします。

# npm の場合 npm install --save-dev eslint # yarn の場合 yarn add --dev eslint

初期設定ファイルを作成する

インストール後、以下のコマンドで対話形式の初期セットアップを実行できます。

npx eslint --init

いくつかの質問に答えると、プロジェクトに合った設定ファイルが自動生成されます。質問の内容は「構文チェックだけにするか」「フレームワークは何を使うか」「TypeScript を使うか」といったものです。

基本的な使い方

コマンドラインで実行する

# 特定のファイルをチェック npx eslint src/index.js # src ディレクトリ配下をまとめてチェック npx eslint "src/**/*.{js,ts,jsx,tsx}" # 自動修正できるものは修正する npx eslint --fix "src/**/*.{js,ts,jsx,tsx}"

--fix を付けると、ルールに応じて自動修正が行われます。ただし、すべてのエラーが自動修正できるわけではありません。手動で直す必要があるものはターミナルに表示されます。

VS Code でリアルタイムにチェックする

拡張機能「ESLint」をインストール
settings.json に以下を追加（保存時に自動修正する場合）

{ "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } }

これでファイルを保存するたびに、修正可能なエラーが自動的に直されます。

設定ファイルの書き方

ESLint v9 以降では eslint.config.js（Flat Config）が標準の設定形式になっています。

import js from "@eslint/js"; export default [ js.configs.recommended, { rules: { "no-unused-vars": "warn", "no-console": "off", "eqeqeq": "error", }, }, ];

ルールの重要度は3段階

値意味 "off" または 0 ルールを無効にする "warn" または 1 警告として表示する（ビルドは止まらない） "error" または 2 エラーとして表示する（CI を落とす用途に便利）

よく使うルールの例

ルール名説明 no-unused-vars 使っていない変数を検出 no-undef 未定義の変数の使用を検出 eqeqeq == ではなく === の使用を強制 no-console console.log の残し忘れを検出 curly if 文などで中括弧の省略を禁止 no-var var の代わりに let / const を強制 prefer-const 再代入がない変数に const の使用を推奨

ルールの全一覧は ESLint の公式ドキュメント（Rules Reference）で確認できます。

共有設定（Shareable Config）を使う

ルールを一つずつ設定するのは大変です。実際の開発では、あらかじめルールがまとまった共有設定パッケージを使うのが一般的です。

# 例：eslint-config-airbnb-base を導入 npm install --save-dev eslint-config-airbnb-base import airbnbBase from "eslint-config-airbnb-base"; export default [ ...airbnbBase, { rules: { // プロジェクト固有の上書き "no-console": "off", }, }, ];

チームやプロジェクトの方針に合った共有設定を選び、必要な部分だけ上書きするのがおすすめです。

TypeScript で使う場合

TypeScript プロジェクトでは typescript-eslint を追加します。

npm install --save-dev typescript-eslint import eslint from "@eslint/js"; import tseslint from "typescript-eslint"; export default tseslint.config( eslint.configs.recommended, ...tseslint.configs.recommended, );

これで TypeScript 固有のルール（型に関するチェックなど）も有効になります。

特定のファイルを除外する

チェック対象から除外したいファイルは、設定ファイル内の ignores で指定します。

export default [ { ignores: ["dist/", "build/", "node_modules/", "*.min.js"], }, // ...その他の設定 ];

Prettier との併用

ESLint と Prettier を同時に使うと、フォーマット系のルールが競合することがあります。eslint-config-prettier を導入して、ESLint 側のフォーマット系ルールを無効化しましょう。

npm install --save-dev eslint-config-prettier import js from "@eslint/js"; import prettierConfig from "eslint-config-prettier"; export default [ js.configs.recommended, prettierConfig, { rules: { // プロジェクト固有のルール }, }, ];

こうすることで、見た目の整形は Prettier に、コード品質のチェックは ESLint に、と役割をきれいに分担できます。

package.json にスクリプトを登録する

よく使うコマンドは package.json にまとめておきましょう。

{ "scripts": { "lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\"", "lint:fix": "eslint --fix \"src/**/*.{js,ts,jsx,tsx}\"" } } # チェックのみ npm run lint # 自動修正付き npm run lint:fix