ESLintとは？Biomeとの違い・使い方を初心者向けに解説
2026.4.11
2026.4.11 この記事は約2 分で読めます
コードのミスを教えてくれるESLint。
使い方を時短で紹介します。
目次
筆者三好アキ（専門用語なしでプログラミング）
私について詳しくは → 自己紹介
ESLintが教えてくれること
ESLintは、コードの「ルール違反」や「潜在的なバグ」を自動で検出するツールです。
具体的には次のようなことを検出してくれます。
• 定義したのに使っていない変数
• セミコロンの有無などのルール統一
• Reactのフックの使い方の誤り
• 到達しないコード（実行されないコード）の検出
コードを書いた瞬間に教えてくれるので、その場ですぐ修正できます。
ESLintとPrettierとの違い
ESLintと似たものにPrettierがあります。
違いを整理しておきましょう。
• Prettier
→ コードの「見た目」を整える（インデント・改行など）
• ESLint
→ コードの「ルール違反やバグ」を検出する
Prettierは見た目の問題、ESLintは中身の問題を扱います。
役割が違うので、実際の開発では両方を使うことが一般的です。
ESLintの働きを今すぐ確認する（ブラウザ上）
ESLintの機能を今すぐ確認したい場合は、ESLint Playgroundを試してみましょう。
ブラウザ上でコードを貼り付けると、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フォルダがチェックされます。
ESLintの使い方（おすすめ）
ここまで、npm install eslintでESLint本体を用意、eslint.config.jsで設定ファイルを用意、というミニマムな使い方を見てきました。
これでも十分に動きますが、チェック時には毎回コマンドを実行する手間がかかります。
コードを書いている時にリアルタイムで教えてくれたら便利です。
そのため一般的には、VS Codeのエクステンションも使います。
下記URLを開き、VS Codeにインストールしましょう。
eslint.config.js内のrulesを見てください。
"error"としてあるものは赤い波線、"warn"としてあるものは黄色い波線（警告扱い）で表示されます。
（拡張機能を入れた後にESLintが動かない場合は、VS Codeを一度再起動してみてください）
ここまでのことをまとめると次のようになります。
| 項目 | 役割 | 必要度 |
|---|---|---|
ESLint本体（npm install eslint） | コードを解析してチェックを実行するツール本体 | 必須 |
設定ファイル（eslint.config.js） | どのルールでチェックするかを定義する | 必須 |
| VS Codeのエクステンション | エディタ上でリアルタイムに結果を表示する | 任意 |
よくある質問
Q1. PrettierとESLintは両方入れないといけない？
必須ではありませんが、両方入れるケースは少なくありません。
Prettierは「見た目」、ESLintは「コードの問題」が担当なので、役割が違います。
VS Codeの拡張機能を2つインストールするだけなので、手間もほとんどかかりません。
Prettierについては下記記事を参考にしてください▼
また近年は、ESLintとPrettier両方の働きをするBiome（バイオーム）が人気です。
下記の記事で紹介しているので参考にしてください▼
Q2. Viteで作ったプロジェクトにESLintが最初から入っているなら、エクステンションは不要？
VS Codeにエクステンションが入っていれば、コードの赤線や黄線が表示されるので、ミスにすぐ気が付けます。
エクステンションが無い場合、チェックのためにnpx eslint .コマンドを実行する必要があり、手間がかかります。
なお実際にESLintを使うReact + Vite開発、Next.js開発は下記記事を参考にしてください。
▼ React + Vite開発の始め方（JavaScript）
▼ React + Vite開発の始め方（TypeScript）
▼ Next.js開発の始め方（TypeScript）
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 + Viteの全体的な開発フローを確認しておきましょう▼
次に読みたい記事特集
