--- title: "ESLintをVSCodeで使う設定手順｜ESLint 10のflat configと保存時の自動修正【10.13対応】" url: "https://www.issoh.co.jp/tech/details/3286/" published: 2024-08-20 updated: 2026-10-22 categories: ["JavaScript"] publisher: "株式会社一創" --- # ESLintをVSCodeで使う設定手順｜ESLint 10のflat configと保存時の自動修正【10.13対応】 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で止める用途にも使えます。静的解析という手法全体と他言語のツールは[静的解析とは？検出できる欠陥と静的解析ツールの選び方](/tech/details/7475/)で整理しています。 ## ESLint 10で変わった設定：eslintrc削除とファイル起点の探索 ESLint 10.0.0は2026年2月6日にnpmへ公開されました。[ESLint v10.0.0のリリース告知](https://eslint.org/blog/2026/02/eslint-v10.0.0-released/)には、利用者に影響する変更として次の3点があります。v9系は[ESLintのバージョンサポート表](https://eslint.org/version-support/)で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拡張](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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のコードアクションの説明](https://code.visualstudio.com/docs/editing/refactoring)では、`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との違いまで](/tech/details/3354/)で扱っています。 ``` 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のリンター連携の説明](https://prettier.io/docs/integrating-with-linters)が「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: typescript@7.0.2 npm error Could not resolve dependency: npm error peer typescript@">=4.8.4 <6.1.0" from typescript-eslint@8.72.0 ``` 空のプロジェクトで`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との違い](/tech/details/11066/)にまとめています。 型情報を使うルールまで有効にした設定です。TypeScript 6.0.3とtypescript-eslint 8.72.0で動作を確認しました。前提として、検査するTypeScriptファイルを含む`tsconfig.json`が必要です。新規プロジェクトでは作成し、includeの対象に検査ファイルが入っていることを確認してください。JavaScriptファイルも型情報付きで検査する場合はallowJsなどの設定が必要です。以前の記事でよく見る`tseslint.config()`は非推奨になっており、[typescript-eslintパッケージの説明](https://typescript-eslint.io/packages/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の違い](/tech/details/8351/)や、リンターと整形を1つにまとめる[Biome v2の導入とESLint/Prettierからの移行](/tech/details/7390/)も候補になります。ただし、typescript-eslintの型情報を使うルールやフレームワーク固有のプラグインを多く使っているプロジェクトでは、置き換えると検査の範囲が狭くなります。CIで品質ゲートとして止める設計は[コード品質とは？測る指標と品質ゲートでCIに組み込む手順](/tech/details/5209/)で扱っています。 ## よくある質問 ### 設定ファイルは .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へ移行する作業も当面は続きます。 ## 関連記事 - [静的解析とは？検出できる欠陥と静的解析ツールの選び方｜Coverity・cppcheckを比較](/tech/details/7475/) - [Prettierとは？意味・読み方からコマンド・設定・ESLintとの違いまで](/tech/details/3354/) - [OxlintとESLintの違いとは？読み方・速度実測・移行手順とBiomeとの比較【1.88対応】](/tech/details/8351/) - [Biome v2とは？最新2.5系の導入・biome.json設定とESLint/Prettier移行](/tech/details/7390/) - [Stylelintとは？v17の変更点・導入手順・設定とCSSネスト対応【17.16対応】](/tech/details/10686/) --- 出典: [ESLintをVSCodeで使う設定手順｜ESLint 10のflat configと保存時の自動修正【10.13対応】]()（株式会社一創）