VSCodeでESLintを使うには、プロジェクトにESLint本体と設定ファイル（eslint.config.mjs）を入れ、VSCodeに拡張機能「ESLint」を入れて、settings.jsonで保存時の自動修正を有効にします。検索上位の解説には.eslintrcを前提にした2019〜2022年の記事が多く残っていますが、2026年2月のESLint 10で.eslintrcは読まれなくなりました。この記事では2026年10月22日時点の最新版ESLint 10.13.0と拡張機能3.0.34を前提に、手元で実行して確かめた結果とエラー文を載せています。ESLintの読み方や静的解析ツールとしての役割も最初に押さえます。
まとめ：VSCodeでESLintを動かす最短手順
手順は4つです。(1) Node.js 20系の20.19.0以上、22系の22.13.0以上、または24以上を用意し、npm init @eslint/config@latestでeslint.config.*を生成する。(2) npx eslint .でターミナルから動くことを先に確かめる。(3) VSCodeに拡張機能「ESLint」（dbaeumer.vscode-eslint）を入れる。(4) settings.jsonに"source.fixAll.eslint": "explicit"を書き、保存時に自動修正させる。
つまずきやすい箇所も3つあります。.eslintrc.*しか無いプロジェクトはESLint 10で終了コード2のエラーになります。npm init -yで作ったpackage.jsonは"type": "commonjs"になるため、importで書いたeslint.config.jsが読めません（.mjsにすれば読めます）。TypeScript 7.0.2を先に入れたプロジェクトではtypescript-eslint 8.72.0がpeer依存の不一致でインストールできません。整形はPrettierに任せ、eslint-config-prettier/flatで衝突するルールを止めます。
ESLintとは：読み方と静的解析で見つかる問題
ESLintは「イーエスリント」と読みます。ESはECMAScript（JavaScriptの仕様名）、lintはソースコードの問題箇所を指摘するツールの総称です。この呼び名は、1978年にベル研究所のStephen C. Johnsonが発表したC言語の検査プログラム「lint」に由来します。ESLintは2013年にNicholas C. Zakasが作ったオープンソースで、現在はOpenJS Foundationのプロジェクトです。
ESLintはコードを実行せずに構文木（AST）を読んで問題を指摘する静的解析ツールです。指摘の中心は、未使用の変数（no-unused-vars）、未定義の変数参照（no-undef）、==による緩い比較（eqeqeq）のようなバグの芽です。ルールごとに"error"・"warn"・"off"の3段階を選べ、"error"が1件でもあればCLIは終了コード1を返すので、CIで止める用途にも使えます。静的解析という手法全体と他言語のツールは静的解析とは？検出できる欠陥と静的解析ツールの選び方で整理しています。
ESLint 10で変わった設定：eslintrc削除とファイル起点の探索
ESLint 10.0.0は2026年2月6日にnpmへ公開されました。ESLint v10.0.0のリリース告知には、利用者に影響する変更として次の3点があります。v9系はESLintのバージョンサポート表で2026年8月6日にEOLとなり、最終版は9.39.5です。
| 変更点 | ESLint 9 | ESLint 10 |
|---|---|---|
| .eslintrc.* と .eslintignore | 環境変数で使用可 | 削除（読まれない） |
| ESLINT_USE_FLAT_CONFIG | falseでeslintrcに戻せる | 無視される |
| 設定ファイルの探索起点 | カレントディレクトリ | 検査するファイルのディレクトリ |
| Node.js | 18.18.0以上など | ^20.19.0・^22.13.0・24以上 |
.eslintrcだけのプロジェクトで出るエラー
.eslintrc.jsonだけを置いたディレクトリでESLint 10.13.0を実行すると、次のメッセージが出て終了コード2で止まりました。VSCodeで波線が一切出ないときに、出力パネルにも同じ内容が出ます。
$ npx eslint bad.js
Oops! Something went wrong! :(
ESLint: 10.13.0
ESLint couldn't find an eslint.config.* file.
From ESLint v9.0.0, the default configuration file is now eslint.config.*.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:ESLINT_USE_FLAT_CONFIG=falseを付けても結果は同じでした。逆にeslint.config.mjsと.eslintrc.jsonが並んでいる場合、.eslintrc.jsonは警告なしに無視されます。古い設定ファイルが残っていると「書いたルールが効かない」原因になるので、移行後は削除します。既存の.eslintrcはnpx @eslint/migrate-config .eslintrc.jsonでeslint.config.mjsの下書きに変換できます。このコマンドは同名のeslint.config.mjsが既にあっても確認なしに上書きしたので、先に手で書いた設定がある場合は退避してから実行します。
モノレポにおけるファイル起点の設定探索
ESLint 10は、検査するファイルのディレクトリから親へ向かってeslint.config.*を探します。ルートとpackages/aの両方に設定を置き、ルートからnpx eslint packages/a/x.jsを実行すると、--debugの出力はUsing config file /private/tmp/esl3286b/packages/a/eslint.config.mjsとなり、packages/a側の設定だけが使われました。v9ではルートの設定が使われていた構成なので、パッケージごとに設定を置いているモノレポはv10へ上げた時点で検査結果が変わります。
ESLintをプロジェクトに入れる：npm init @eslint/config
ESLintはプロジェクトごとに開発依存として入れます。VSCodeの拡張機能はプロジェクト内のnode_modulesにあるESLintを呼び出す仕組みなので、本体を入れないと拡張機能だけ入れても動きません。
Node.jsの要件と対話セットアップ
ESLint 10.13.0のpackage.jsonが要求するNode.jsは^20.19.0 || ^22.13.0 || >=24です。node -vで確認してから、プロジェクトのルートで設定ウィザードを起動します。
node -v
npm init @eslint/config@latestウィザード（@eslint/create-config 3.0.0）は、検査する言語・用途・モジュール形式・フレームワーク・TypeScriptの有無を順に尋ね、必要なパッケージのインストールとeslint.config.*の生成まで行います。npx eslint --initでも同じウィザードが起動します。
eslint.config.mjs の最小構成
手で書く場合の最小構成です。@eslint/jsの推奨ルール（js/recommended）を土台にし、ブラウザのグローバル変数をglobalsパッケージで登録しています。ESLint 10では.eslintignoreも読まれないため、検査から外すディレクトリはglobalIgnoresで指定します（この設定でdist/内のファイルが検査対象から外れることを確認しました）。
npm install --save-dev eslint @eslint/js globals// eslint.config.mjs
import js from "@eslint/js";
import globals from "globals";
import { defineConfig, globalIgnores } from "eslint/config";
export default defineConfig([
globalIgnores(["dist/"]),
{
files: ["**/*.js"],
plugins: { js },
extends: ["js/recommended"],
languageOptions: { globals: globals.browser },
},
{ rules: { "prefer-const": "error", eqeqeq: "error" } },
]);ファイル名を.mjsにしているのは理由があります。npm 11.17.0でnpm init -yを実行するとpackage.jsonに"type": "commonjs"が入り、同じ内容をeslint.config.jsに書くとSyntaxError: Cannot use import statement outside a moduleで読み込みに失敗しました。.jsのまま使うなら、package.jsonのtypeを"module"に変えます。
ESLint CLIの実行とfixオプションによる自動修正
VSCodeの設定に進む前に、ターミナルで動くことを確かめます。ここで動かないものは拡張機能でも動きません。次の3行のファイルを検査した結果です。
// bad.js
const unused = 1;
let x = 2
if (x == 2) { console.log(y) }$ npx eslint bad.js
/private/tmp/esl3286b/bad.js
1:7 error 'unused' is assigned a value but never used no-unused-vars
2:5 error 'x' is never reassigned. Use 'const' instead prefer-const
3:7 error Expected '===' and instead saw '==' eqeqeq
3:27 error 'y' is not defined no-undef
✖ 4 problems (4 errors, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.npx eslint --fix bad.jsで自動修正されたのはletからconstへの変更1件だけで、残り3件はそのまま残り終了コードも1でした。--fix（とVSCodeの保存時修正）が直すのは、ルールが修正方法を持っているものに限られます。未使用変数や未定義参照は人が直します。
VSCodeのESLint拡張機能と保存時の自動修正設定
VSCode用ESLint拡張機能のインストール
拡張機能ビュー（Ctrl+Shift+X、MacはCmd+Shift+X）で「ESLint」と検索し、発行元がMicrosoftの「ESLint」（ID: dbaeumer.vscode-eslint）を入れます。VS Code MarketplaceのESLint拡張の最新版は3.0.34（2026年7月16日公開）で、インストール数は5,300万を超えています。3.0.34ではESLintの一括抑制ファイルを表示する設定が加わりました。入れた直後から、エディタ上の波線と「問題」パネルにESLintの指摘が出ます。
settings.jsonに書く保存時の自動修正
コマンドパレットで「Preferences: Open User Settings (JSON)」を開き、次の設定を加えます。チームで共有するならプロジェクトの.vscode/settings.jsonに書きます。
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}値はexplicit・always・neverから選びます。VS Codeのコードアクションの説明では、explicit（既定）はCtrl+Sなど明示的な保存のときだけ、alwaysはウィンドウやフォーカスの切り替えによる自動保存でも実行すると定義されています。古い記事のtrue・falseは今も動きますが、将来は非推奨になると書かれているため、新しく書くならexplicitにします。自動保存を有効にしていて、フォーカスを外した瞬間にコードが書き換わるのを避けたい場合もexplicitが向いています。
eslint.useFlatConfigなどの拡張設定の要否と既定値
ESLint 10を使う限り、flat config用の追加設定は不要です。拡張機能のREADMEは、eslint.useFlatConfigはESLint 8.57以上9.x未満では既定false、9.xでは既定true、10.0.0以上では無視されると書いています。古い記事にあるeslint.experimental.useFlatConfigは非推奨です。主な設定の既定値は次のとおりです（拡張機能のpackage.jsonで確認）。
| 設定 | 既定値 | 変えるとき |
|---|---|---|
| eslint.run | onType | 重いならonSave |
| eslint.validate | 未設定 | probe外の言語を足す |
| eslint.probe | javascript・typescript・vue など17言語 | 通常は不要 |
| eslint.format.enable | false | ESLintで整形する場合のみ |
| eslint.useFlatConfig | 未設定 | ESLint 10では無視 |
| eslint.workingDirectories | 未設定 | モノレポで解決がずれる |
eslint.probeの既定にはjavascript・javascriptreact・typescript・typescriptreact・vue・svelte・astro・markdown・json・cssなどが入っており、対応プラグインが設定にあれば自動で検査します。検査するファイルの範囲はeslint.config.mjsのfilesで決めるのが基本で、eslint.validateを二重に書く必要はありません。
VSCodeでESLintが効かないときの切り分け
波線が出ない・保存しても直らないときは、まずコマンドパレットで「ESLint: Show Output Channel」を開きます。拡張機能はESLintの起動エラーをここに書き出すので、原因の大半はこのログで決まります。出やすい原因と対処を、確認する順に並べます。
- ESLint本体が無い：プロジェクトで
npm ls eslint --depth=0を実行し、ESLint本体が依存関係に存在するか確認する。表示されなければnpm install --save-dev eslint。 - 設定ファイルが無い・古い：
ESLint couldn't find an eslint.config.* file.なら、.eslintrc.*からeslint.config.mjsへ移行する。 - 設定ファイルが読めない：
Cannot use import statement outside a moduleなら、ファイル名を.mjsにするかpackage.jsonのtypeを"module"にする。 - 対象ファイルが外れている：
filesのパターンに拡張子が入っているか。npx eslint --print-config src/app.tsで、そのファイルに効く設定が出るか確かめる。 - 保存時に直らない：
source.fixAll.eslintの綴りと値、そして指摘されているルールに自動修正があるか（CLIの--fixで直るか）を見る。 - 設定を直したのに反映されない：「ESLint: Restart ESLint Server」でサーバーを再起動する。
ログでも原因が分からないときは、"eslint.debug": trueを設定すると、CLIの--debugと同じ詳細ログ（どの設定ファイルを読んだか）が出力チャネルに出ます。
Prettierと併用するsettings.json
ESLintはコードの正しさ、Prettierは見た目の整形を受け持ちます。整形をESLintのルールでも縛ると両者が衝突するため、ESLint側の整形系ルールをeslint-config-prettierで止めるのが基本です。Prettier自体の設定はPrettierとは？意味・読み方からコマンド・設定・ESLintとの違いまでで扱っています。
npm install --save-dev prettier eslint-config-prettier// eslint.config.mjs
import js from "@eslint/js";
import globals from "globals";
import { defineConfig, globalIgnores } from "eslint/config";
import eslintConfigPrettier from "eslint-config-prettier/flat";
export default defineConfig([
globalIgnores(["dist/"]),
{
files: ["**/*.js"],
plugins: { js },
extends: ["js/recommended"],
languageOptions: { globals: globals.browser },
},
{ rules: { "prefer-const": "error", eqeqeq: "error" } },
eslintConfigPrettier, // 最後に置き、前にある整形系ルールを止める
]);VSCode側は、Prettierの拡張機能（ID: esbenp.prettier-vscode）をインストールしてから、整形をPrettier拡張に、修正をESLint拡張に割り当てます。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}衝突が残っていないかはnpx eslint-config-prettier bad.jsで調べられます。eslint-config-prettier 10.1.8で、設定を外した状態で実行するとno-unexpected-multilineが「自動では確認できない特殊ルール」として表示され、設定を入れた状態では衝突なしと表示されました。PrettierをESLintのルールとして走らせるeslint-plugin-prettierについては、Prettierのリンター連携の説明が「generally not recommended」としており、エディタの波線が増える・直接Prettierを実行するより遅いことを理由に挙げています。
TypeScriptで使う：typescript-eslintとTypeScript 7の組み合わせ
TypeScriptを検査するにはtypescript-eslintを使います。ここで注意が要るのが版の組み合わせです。2026年10月22日時点のnpmのlatestはTypeScript 7.0.2ですが、typescript-eslint 8.72.0のpeer依存はtypescript@">=4.8.4 <6.1.0"です。TypeScript 7.0.2を先に入れたプロジェクトに後からnpm install --save-dev typescript-eslintを実行すると、次のエラーで止まりました。
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error Found: [email protected]
npm error Could not resolve dependency:
npm error peer typescript@">=4.8.4 <6.1.0" from [email protected]空のプロジェクトでnpm install --save-dev eslint @eslint/js typescript typescript-eslintのように一度に入れた場合は、npmがpeer範囲に合うTypeScript 6.0.3を選び、エラーになりませんでした。型チェックにTypeScript 7を使いたいプロジェクトでは、ESLint用のTypeScriptを6.0系に固定するかどうかを先に決めておく必要があります。6.0と7.0の違いはTypeScript 6.0とは｜5から6への移行手順とts5to6・7.0との違いにまとめています。
型情報を使うルールまで有効にした設定です。TypeScript 6.0.3とtypescript-eslint 8.72.0で動作を確認しました。前提として、検査するTypeScriptファイルを含むtsconfig.jsonが必要です。新規プロジェクトでは作成し、includeの対象に検査ファイルが入っていることを確認してください。JavaScriptファイルも型情報付きで検査する場合はallowJsなどの設定が必要です。以前の記事でよく見るtseslint.config()は非推奨になっており、typescript-eslintパッケージの説明はESLint本体のdefineConfigへの移行を案内しています。projectService: trueは、各ファイルに最も近いtsconfig.jsonを自動で使う指定です。
// eslint.config.mjs
import js from "@eslint/js";
import { defineConfig } from "eslint/config";
import tseslint from "typescript-eslint";
export default defineConfig([
js.configs.recommended,
tseslint.configs.recommendedTypeChecked,
{
languageOptions: {
parserOptions: { projectService: true, tsconfigRootDir: import.meta.dirname },
},
},
{ files: ["**/*.mjs"], extends: [tseslint.configs.disableTypeChecked] },
]);この設定でasync関数をawaitせずに呼ぶコードを検査すると、@typescript-eslint/no-floating-promisesが「Promises must be awaited」と指摘しました。この種の指摘は型情報が無いrecommendedでは出ません。最後の行は設定ファイル自身（.mjs）を型チェックの対象から外すためのものです。
既存プロジェクトに後から入れる：一括抑制で段階導入
既存プロジェクトにESLintを後から導入すると、設定したルールに応じて多数の違反が検出され、CIが失敗することがあります。全部を直してから導入する必要はありません。ESLint 10には、ファイル・ルールごとにerrorの件数を記録する一括抑制（bulk suppressions）があります。件数が記録以下なら抑制され、記録を超えると、そのファイルの同じルールの違反がすべて報告されます。違反の新旧は識別せず、warnは抑制しません。
npx eslint . --suppress-all実行するとルートにeslint-suppressions.jsonができ、ファイルごと・ルールごとの件数が記録されます。先ほどのbad.jsでは4ルール各1件が記録され、再実行すると終了コード0になりました。注意が要るのは違反を直した後です。1件直して再実行すると「There are suppressions left that do not occur anymore.」と表示され、終了コード2で止まりました。npx eslint . --prune-suppressionsで記録を更新すると0に戻ります。逆にno-unused-varsの違反を1件増やすと、記録済みの1件を含む2件が両方報告されました。CIでは直したコミットにeslint-suppressions.jsonの更新も含めます。VSCodeでは抑制した違反は既定で表示されませんが、拡張機能3.0.34のeslint.bulkSuppression.enableをtrueにすると、抑制分を重要度「情報」で表示できます（ESLint 10.1以上が必要）。
ESLintが遅いと感じる規模なら、Rust製のOxlintとESLintの違いや、リンターと整形を1つにまとめるBiome v2の導入とESLint/Prettierからの移行も候補になります。ただし、typescript-eslintの型情報を使うルールやフレームワーク固有のプラグインを多く使っているプロジェクトでは、置き換えると検査の範囲が狭くなります。CIで品質ゲートとして止める設計はコード品質とは？測る指標と品質ゲートでCIに組み込む手順で扱っています。
よくある質問
設定ファイルは .eslintrc.js のままでも動きますか？
ESLint 10以降では動きません。.eslintrc.*と.eslintignoreは読まれず、eslint.config.*が無ければ終了コード2で止まります。ESLint 9系は2026年8月6日にサポートが終了しているため、9系に留まって.eslintrcを使い続けるより、npx @eslint/migrate-configで移行するほうが安全です。
VSCodeのESLint拡張機能だけ入れれば使えますか？
使えません。拡張機能はプロジェクトにインストールされたESLint本体とeslint.config.*を使って検査します。拡張機能の説明はグローバルインストール（npm install -g eslint）にも触れていますが、チームで同じ版を使うためにプロジェクトの開発依存として入れるのが一般的です。
ESLintはJavaの検査にも使えますか？
使えません。ESLintの対象はJavaScriptとTypeScript、公式の言語プラグインを入れた場合のJSON・Markdown・CSSなどです。JavaにはCheckstyleやPMD、PythonにはRuffなど、言語ごとの静的解析ツールを使います。
TSLintとESLintはどう違いますか？
TSLintはTypeScript専用のリンターでしたが、2019年に非推奨となり、TypeScriptの検査はtypescript-eslint経由でESLintが担う形に移りました。新しく採用する理由はありません。
ESLintの設定スキルは実務や案件で求められますか？
JavaScript・TypeScriptの開発ではESLintが入っているプロジェクトが多く、eslint.config.*を読んでルールを足し引きする、Prettierとの役割分担を組む、CIで違反を止めるといった作業は日常的に発生します。ESLint 10でeslintrcが削除されたため、古い設定のプロジェクトをflat configへ移行する作業も当面は続きます。
