【ESLint】コードのミスをリアルタイムで表示するツールの使い方（ビギナー向け）

ESLintが教えてくれること

ESLintは、コードの「ルール違反」や「潜在的なバグ」を自動で検出するツールです。

具体的には次のようなことを検出してくれます。

• 定義したのに使っていない変数
• セミコロンの有無などのルール統一
• Reactのフックの使い方の誤り
• 到達しないコード（実行されないコード）の検出

コードを書いた瞬間に教えてくれるので、その場ですぐ修正できます。

ESLintとPrettierとの違い

ESLintと似たものにPrettierがあります。

違いを整理しておきましょう。

• Prettier
→ コードの「見た目」を整える（インデント・改行など）

• ESLint
→ コードの「ルール違反やバグ」を検出する

Prettierは見た目の問題、ESLintは中身の問題を扱います。

役割が違うので、実際の開発では両方を使うことが一般的です。

ESLintの働きを今すぐ確認する（ブラウザ上）

ESLintの機能を今すぐ確認したい場合は、ESLint Playgroundを試してみましょう。

https://eslint.org/play

ブラウザ上でコードを貼り付けると、ESLintがどのように問題を検出するかをすぐに試せます。

ESLintの使い方（ミニマム）

ESLintを使うには、いくつか準備するものがあります。

ここで混乱するビギナーが多いので、少し詳しく見ていきましょう。

必ず必要なのはESLint本体です。

これは次のコマンドでプロジェクトに追加します。

npm install --save-dev eslint

（--save-devとは、開発時にのみ必要なパッケージであるdevDependenciesへの保存を指定するものです。）

ESLint本体とともに設定ファイルも必要です。

これはeslint.config.jsという名前で、プロジェクトのルートに作ってください（以前は.eslintrcという設定ファイルでしたが現在は非推奨です）。

eslint.config.jsには次のような設定を書きます（下記はVite + Reactプロジェクトでよく使われる設定例です）。

// eslint.config.js

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{js,jsx}'],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    rules: {
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
    },
  },
])

ESLint本体とeslint.config.jsが準備できたら、ターミナルで次のコマンドを実行しましょう。

npx eslint .

プロジェクト全体がチェックされ、問題があればターミナルに次のように表示されます。

src/main.js
  1:12  error  Missing semicolon  semi
  2:12  error  Missing semicolon  semi

✖ 2 problems (2 errors, 0 warnings)

npx eslint .コマンドではこのように問題が表示されるだけですが、自動修正まで行いたい場合は次のコマンドを使いましょう。

npx eslint . --fix

なお、package.jsonに次のように設定されている場合は、npm run lintコマンドがnpx eslint .と同じ働きをします。

// package.json

{
   "scripts": {
      "lint": "eslint ."
   }
}

また、ESLintでチェック対象の範囲も設定可能です。

eslint .ではプロジェクト全体、eslint srcと書けばsrcフォルダがチェックされます。

現在、React × AI駆動開発用の無料ガイドを配布しています。

⚫︎ monotein.com/present

ESLintの使い方（おすすめ）

ここまで、npm install eslintでESLint本体を用意、eslint.config.jsで設定ファイルを用意、というミニマムな使い方を見てきました。

これでも十分に動きますが、チェック時には毎回コマンドを実行する手間がかかります。

コードを書いている時にリアルタイムで教えてくれたら便利です。

そのため一般的には、VS Codeのエクステンションも使います。

下記URLを開き、VS Codeにインストールしましょう。

ESLintリンク

eslint.config.js内のrulesを見てください。

"error"としてあるものは赤い波線、"warn"としてあるものは黄色い波線（警告扱い）で表示されます。

（拡張機能を入れた後にESLintが動かない場合は、VS Codeを一度再起動してみてください）

ここまでのことをまとめると次のようになります。

よくある質問（Q & A）

Q1. PrettierとESLintは両方入れないといけない？

必須ではありませんが、両方入れるケースは少なくありません。

Prettierは「見た目」、ESLintは「コードの問題」が担当なので、役割が違います。

VS Codeの拡張機能を2つインストールするだけなので、手間もほとんどかかりません。

Prettierについてはこちらを参照。

また近年は、ESLintとPrettier両方の働きをするBiome（バイオーム）が人気です。

こちらの記事で紹介しているのチェックしてみましょう。

Q2. Viteで作ったプロジェクトにESLintが最初から入っているなら、エクステンションは不要？

VS Codeにエクステンションが入っていれば、コードの赤線や黄線が表示されるので、ミスにすぐ気が付けます。

エクステンションが無い場合、チェックのためにnpx eslint .コマンドを実行する必要があり、手間がかかります。

Q3. 波線が表示されたコードは、必ず直さないといけない？

ルールの種類によります。

赤い波線（"error"）は、そのままにするとビルドが止まる場合があるので修正が必要です。

黄色い波線（"warn"）は「警告」なので、動作はしますが修正することが推奨されています。

どうしても警告を消したい場合は、そのルール自体をオフにすることもできます。次に紹介します。

Q4. ESLintのエラーを一時的に無視する方法はある？

無視したい行の直前に次のコメントを書くと、その行だけESLintのチェックをスキップできます。

// eslint-disable-next-line
const x = 1;

特定のルールだけを無視したい場合は、ルール名を指定します。

// eslint-disable-next-line no-unused-vars
const x = 1;

多用するとESLintを入れている意味が薄れるので、本当に必要な時だけ使うようにしましょう。

ESLintのような開発ツールと合わせて、現在のフロントエンドの学習ステップも確認してみましょう。

React → TypeScript → Next.jsの順番でスキルを積み上げるためのロードマップを無料で配布しています。

自分の現在地と次にすべきことをチェックしましょう▼

⚫︎ monotein.com/present