Viteで作ったReact + TypeScript環境に、ESLintとPrettierをどう連携させればいいの？と迷っていませんか？
2026年現在、yarn create viteで作ったプロジェクトには最初からESLintのflat config（eslint.config.js）が入っています。だから昔のようにeslint --initを叩く必要はもうありません。
つまずきやすいのはむしろここから先――Prettierとの連携・ルールの衝突解消・開発サーバーでのエラーのリアルタイム表示です。この記事では、その3つをESLint v9のflat configに対応した2026年版の最新構成で、つまずきポイントごと丁寧に解説します。
さらに、VSCodeで保存した瞬間に自動整形し、husky + lint-stagedで問題のあるコードをコミット前に止めるところまで扱います。この記事1本で、個人開発だけでなくチーム開発でも使える環境が完成します。
ESLintとPrettierの役割分担
ESLintとPrettierは似て見えますが、担当する仕事が違います。ここを混同しないことが、設定で迷わないための第一歩です。
- ESLint：コードの品質をチェックする（未使用変数、Hooksの誤用、バグになりやすい書き方など）
- Prettier：コードの見た目を整える（インデント、クォート、セミコロン、改行など）
本記事では、品質チェックはESLint、整形はPrettierに分離し、競合するESLintルールだけをeslint-config-prettierで無効化します。
この記事でわかること
- 2026年のVite + React(TypeScript)が標準で持つeslint.config.js（flat config）の読み方
- Prettierの導入と、ESLintとの正しい連携方法（eslint-plugin-prettierを使わない最新構成）
- 開発サーバー起動中にESLintエラーをリアルタイム表示する設定（flat config対応）
yarn fixで型チェック・lint・フォーマットを一括実行する方法- VSCodeの保存時自動整形と、husky + lint-stagedによるコミット前チェック
- 「エラーが表示されない」「保存のたびに整形が戻る」などよくあるトラブルの解決法
結論：最終的にこうなればOK
細かい手順に入る前に、ゴールを先に見ておきましょう。最終的に用意するのは次の3ファイルです。これがそのまま「答え」なので、急いでいる方はコピペでも動きます。
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-config-prettier'
import { globalIgnores } from 'eslint/config'
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
prettier, // ← Prettierとの衝突をオフにする。必ず一番最後に置く
]){
"singleQuote": false
}"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"preview": "vite preview",
"lint": "eslint .",
"format": "prettier --write .",
"typecheck": "tsc --noEmit",
"fix": "tsc --noEmit && eslint . --fix && prettier --write ."
}「なぜこうなるのか」を理解しておくと応用が効くので、以下で1ステップずつ組み立てていきます。
前提：2026年のESLint事情（ここが昔と違う）
ネット上の古い記事をそのまま真似すると詰まります。2026年の正しい前提を先に押さえましょう。
- Node.js 20以上
- ESLint v9・Prettier v3
- パッケージマネージャはyarn（npm・pnpmでも読み替え可能）
- 保存時自動整形を使う場合はVSCode
なお、create-react-appはReact公式で非推奨になったため、本記事では現在の標準であるViteを使います。
- 設定ファイルは
eslint.config.js（flat config）が標準。.eslintrc.jsonはESLint v9で非推奨になりました。 eslint --initはもう使わない。create viteがflat configを最初から生成してくれます。- Prettierとの連携は
eslint-config-prettierだけ。eslint-plugin-prettierは非推奨です（理由は後述）。
| 項目 | 昔（〜2023頃） | 2026年の最新 |
|---|---|---|
| 設定ファイル | .eslintrc.json | eslint.config.js（flat config） |
| 初期化 | eslint --init | create viteが自動生成 |
| Prettier連携 | eslint-plugin-prettier | eslint-config-prettier のみ |
| ESLintのバージョン | v8系 | v9系 |
導入手順
ステップ1：ViteでReact(TypeScript)プロジェクトを作成する
yarn create vite my-app --template react-tsこのコマンドでVite + React + TypeScriptのテンプレートを一発で作成できます（my-appはお好みのプロジェクト名に変更してください）。
作成後、cd my-app && yarnで依存関係をインストールします。
npmを使う場合はnpm create vite@latest my-app -- --template react-ts、続けてcd my-app && npm installでも構いません。
JavaScript（非TypeScript）構成ならテンプレートをreactに変更し、以降の設定では対象を**/*.{js,jsx}にします。
型チェック用のtsc --noEmitとvite-plugin-checkerのtypescript: trueは不要です。
💡 ポイント：2026年のテンプレートには、ルート直下に最初からeslint.config.jsが含まれています。eslint-plugin-react-hooksやtypescript-eslintも自動で入るため、ESLint自体のセットアップはほぼ完了済みです。
ステップ2：生成された eslint.config.js を理解する
自動生成されたeslint.config.jsは、だいたい次のような中身です。各行の意味をコメントで補足しました。
import js from '@eslint/js' // ESLintの推奨ルール
import globals from 'globals' // ブラウザのグローバル変数定義
import reactHooks from 'eslint-plugin-react-hooks' // Hooksのルール
import reactRefresh from 'eslint-plugin-react-refresh' // HMR向けのルール
import tseslint from 'typescript-eslint' // TypeScript対応
import { globalIgnores } from 'eslint/config'
export default tseslint.config([
globalIgnores(['dist']), // ビルド成果物は対象外
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])✅ react/react-in-jsx-scopeのoff設定はもう不要です。React 17以降の新しいJSX変換により、import Reactを書かなくてもエラーにならなくなったためです。
昔の記事にあった「react-in-jsx-scopeをoffにする」手順は2026年では不要と覚えておきましょう。
ステップ3：Prettierを導入する
yarn add -D --exact prettierPrettierは--exactでバージョン固定するのが公式推奨です。バージョン差で整形結果がブレるのを防げます。
続いて、整形のルールを書く.prettierrcをルート直下に作成します。
{
"singleQuote": false
}これで「シングルクオートではなくダブルクオートを使う」という設定になります。他にも多くのオプションがあるので、チームの好みに合わせて調整してください。
あわせて、整形対象外にしたいファイルを.prettierignoreに書いておくと安全です（例：dist、node_modules）。
dist
node_modules
pnpm-lock.yaml
package-lock.jsonステップ4：ESLintとPrettierを連携させる（衝突を解消）
yarn add -D eslint-config-prettierなぜこれが必要？ ESLintにも「インデントやクオートの整形ルール」が存在し、Prettierの整形とぶつかることがあります。放置すると保存のたびに整形が行ったり来たりする地獄が起きます。
eslint-config-prettierは、Prettierと競合するESLint側のルールをまとめてオフにしてくれるライブラリです。
flat configでは、これをeslint.config.jsの配列の一番最後に追加します。「最後」であることが重要で、後から読み込まれた設定が優先されるため、Prettierと衝突するルールを確実に打ち消せます。
import tseslint from 'typescript-eslint'
+ import prettier from 'eslint-config-prettier'
import { globalIgnores } from 'eslint/config'
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [ /* ...（省略）... */ ],
languageOptions: { /* ...（省略）... */ },
},
+ prettier, // ← 必ず一番最後に置く
])📌 eslint-plugin-prettierは使いません。 整形エラーをすべてESLintのエラーとして表示する方式は動作が重く、現在は非推奨です。「整形はPrettierに任せ、ESLintは整形以外の品質チェックに専念させる」――この役割分担が2026年の主流です。
ステップ5：開発サーバーでESLintエラーをリアルタイム表示する
yarn dev中にエラーをその場で気づけるようにします。vite-plugin-checkerを使うと、ESLintと型エラーをターミナルとブラウザにリアルタイム表示できます。
yarn add -D vite-plugin-checkerimport { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ import checker from 'vite-plugin-checker'
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
+ checker({
+ typescript: true,
+ eslint: {
+ lintCommand: 'eslint .',
+ useFlatConfig: true, // ← flat config を使う場合に必須
+ },
+ }),
],
})⚠️ つまずきポイント：flat configを使う場合はuseFlatConfig: trueを必ず指定してください。これが無いと「設定ファイルが見つからない」エラーになります。
また、flat configではlintCommandに--extは不要です（対象ファイルはeslint.config.js側のfilesで指定済みのため）。
ステップ6：yarn fix で一括実行できるようにする
毎回コマンドを打つのは面倒なので、package.jsonのscriptsに便利なコマンドをまとめます。
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"preview": "vite preview",
+ "lint": "eslint .",
+ "format": "prettier --write .",
+ "typecheck": "tsc --noEmit",
+ "fix": "tsc --noEmit && eslint . --fix && prettier --write ."
},yarn fixを実行すると、以下を上から順に一括で行います。
① TypeScriptの型エラーチェック（tsc --noEmit）
② ESLintでコードをチェック＆自動修正（eslint . --fix）
③ Prettierでコードをフォーマット（prettier --write .）
💡 順番が大事：先にESLintで自動修正してからPrettierで整形することで、最終的な見た目をPrettier基準に統一できます。コミット前やCIでyarn fixを回す運用にすると、コードの品質が安定します。
ステップ7：VSCodeで保存時に自動整形する
VSCodeにPrettier - Code formatter（esbenp.prettier-vscode）とESLint（dbaeumer.vscode-eslint）を入れ、プロジェクト直下の.vscode/settings.jsonを次のようにします。
リポジトリに含めれば、チーム全員で同じ設定を共有できます。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}これで保存時にPrettierが見た目を整え、ESLintが自動修正できる問題を直します。コマンドを毎回手で実行する必要がなくなります。
ステップ8：husky + lint-stagedでコミット前に自動チェックする
エディタ設定は拡張機能を入れていないメンバーには効きません。そこでhusky + lint-stagedを使い、Gitのコミット時にステージ済みファイルだけを強制チェックします。
yarn add -D husky lint-staged
yarn husky inithusky v9以降では、初期化すると.husky/とpre-commitフックが生成されます。.husky/pre-commitの中身を次の1行にします。
yarn lint-staged続いてpackage.jsonに以下を追加します。
{
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"eslint --fix",
"prettier --write"
],
"*.{json,css,md}": [
"prettier --write"
]
}
}これでコミットのたびに変更ファイルへESLintの自動修正とPrettierの整形がかかり、修正できないエラーが残ればコミットが中断されます。npmならnpm install -D husky lint-staged、npx husky init、フックはnpx lint-stagedと読み替えてください。
ステップ9：動作確認
yarn devViteの開発サーバーを起動します。わざとルール違反のコード（未使用の変数など）を書いてみてください。
function App() {
const unused = 1
return <div>hello</div>
}
export default App
上記のようにESLintのエラーがターミナルにリアルタイム表示されれば設定成功です！
続いて、一括修正コマンドも確認してみましょう。
yarn fix
型チェック・自動修正・フォーマットが順に実行されれば完了です。お疲れさまでした！
- 保存すると、崩したインデントがPrettierで整う
yarn lintを実行すると、unusedが未使用だとESLintに指摘されるgit commitするとlint-stagedが走り、修正できないエラーがあればコミットが止まる
よくあるエラーと解決法
開発サーバーにESLintエラーが表示されない
vite-plugin-checkerを入れたか、vite.config.tsのchecker()にuseFlatConfig: trueを付けたかを確認してください。設定変更後は開発サーバーの再起動が必要です（一度Ctrl + Cで止めてyarn devし直す）。
「ESLint couldn't find a configuration file」と出る
ESLint v9はeslint.config.js（flat config）を探します。プロジェクトに古い.eslintrc.jsonや.eslintrc.cjsが残っていると競合することがあるので、flat configに移行したら古い設定ファイルは削除しましょう。
保存のたびに整形が行ったり来たりする
ESLintとPrettierのルールが衝突しています。eslint-config-prettierを入れ、eslint.config.jsの配列の一番最後にprettierを置けているか確認してください。順番が違うと衝突が解消されません。
VSCodeで保存時に自動整形されない
「ESLint」「Prettier - Code formatter」拡張を入れたうえで、.vscode/settings.jsonに以下を追加します。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}それでも動かない場合は、VSCode右下の言語モードでフォーマッタが競合していないか確認し、Format Document With…からPrettierを既定のフォーマッタに設定し直してください。
huskyのフックが動かない
.husky/pre-commitが存在するか、プロジェクトがgit init済みかを確認してください。clone直後は依存関係をインストールし、package.jsonのprepareスクリプトを通してhuskyを有効化します。
よくある質問（FAQ）
eslint-plugin-prettier は使わないの？
使いません。整形のズレをすべてESLintエラーとして扱う方式は動作が重く、エディタ上のノイズも増えるため非推奨です。eslint-config-prettierで衝突ルールをオフにし、整形はprettier --writeに任せるのが2026年の主流です。
.eslintrc.json はもう使えない？
ESLint v9にも旧形式の互換モードはありますが、非推奨です。新規プロジェクトではeslint.config.js（flat config）を使ってください。create viteも最初からflat configを生成します。
create vite で eslint.config.js が入っていた。もう何もしなくていい？
ESLint自体は動きます。ただしPrettierとの連携（ステップ3・4）と開発サーバーでのリアルタイム表示（ステップ5）はテンプレートに含まれないため、本記事の手順が必要です。
npm や pnpm でも同じ手順でできる？
できます。本記事のyarn add -Dをnpm install -Dやpnpm add -Dに、yarn fixをnpm run fixなどに読み替えればOKです。設定ファイルの中身は共通です。
まとめ
この記事では、Vite + React(TypeScript)環境にESLintとPrettierを2026年版（ESLint v9 / flat config）で導入する手順を解説しました。
- 2026年は
create viteがflat config（eslint.config.js）を自動生成。eslint --initは不要 - Prettierは
--exactで導入し、.prettierrcでルールを設定 eslint-config-prettierを配列の最後に置いて衝突を解消（plugin版は使わない）vite-plugin-checker＋useFlatConfig: trueで開発サーバーにエラーをリアルタイム表示yarn fixで型チェック・lint・フォーマットを一括実行- VSCodeの保存時整形とhusky + lint-stagedのコミット前チェックで、チーム運用の属人性をなくす
flat configは最初こそ戸惑いますが、設定が1ファイルに集約されて見通しが良く、慣れると旧形式には戻れません。まずは本記事の「結論」のコードをコピペして動かし、少しずつ自分好みにカスタマイズしていきましょう。
📌 参考リンク：ESLint flat config 公式ドキュメント | Prettier 公式 | Vite 公式
🔗 関連記事：Reactの記事一覧 ／ TypeScriptの記事一覧 ／ その他のフロントエンド開発記事もフロントエンドラボでご覧いただけます。
あわせて読みたい関連記事
Next.js ESLint・Prettier設定 完全ガイド【2026】Next.jsにESLintとPrettierを導入する手順を2026年の最新構成で解説。create-next-app標準のeslint-config-nextにPrettierを競合なく組み込み、保存時の自動整形、husky+lint-stagedのコミット前チェックまでコピペで設定します。frontendlab.magicgifted.com
ESLint+Prettierを卒業｜Biomeで爆速リント【2026】ESLint と Prettier、設定ファイルもプラグインも競合ももう限界——2026年のトレンドは Rust 製オールインワン「Biome」です。3コマンドで移行でき、フォーマットは Prettier の約35倍高速。コピペで使える biome.json と VS Code / CI 設定まで、10分で終わる乗り換え手順を丸ごと紹介します。frontendlab.magicgifted.com
