MENU
  1. ホーム
  2. プログラミング
  3. React
  4. How to Add ESLint & Prettier to Vite + React(TypeScript) – 完全ガイド【2026年版】

How to Add ESLint & Prettier to Vite + React(TypeScript) – 完全ガイド【2026年版】

プログラミング React typescript

Viteで作ったReact + TypeScript環境に「ESLintとPrettierってどう設定するの？」と迷っていませんか？
公式ドキュメント通りに進めると詰まりがちなポイントがいくつかあります。この記事では、2026年時点での最新の方法（eslint-plugin-prettierを使わない構成）で、コード品質管理環境をサクッと構築する手順を紹介します。

目次

この記事でわかること

  • Vite + React(TypeScript)プロジェクトへのESLint導入手順
  • Prettierの設定と連携方法（eslint-plugin-prettier不使用の最新構成）
  • 開発サーバー起動中にESLintエラーをリアルタイム表示する設定
  • yarn fixコマンドで型チェック・lint・フォーマットを一括実行する方法

この記事の方針

・開発サーバー起動中にESLintエラーをリアルタイム表示する
・eslint-plugin-prettierは非推奨のため不使用（eslint-config-prettierを使う2026年版の最新構成）
・ESLint v9のflat config（eslint.config.js）が主流になりつつあるが、本記事では従来の.eslintrc.jsonベースで解説

導入手順

ステップ1：ViteでReact(TypeScript)プロジェクトを作成する

yarn create vite my-app --template react-ts

上記のコマンドでViteが搭載されたReact + TypeScriptアプリのテンプレートを一発で作成できます。
（my-appの部分はお好みのプロジェクト名に変更してください）

ステップ2：ESLintの設定

ESLintのインストールと初期設定

yarn add -D eslint

上記のコマンドでESLintをインストールします。

yarn eslint --init

上記のコマンドでESLintの初期設定を行います。

いくつか質問されるので、プロジェクトに合わせて回答してください。

上記の例を参考に回答します。2026年時点でも基本的な選択肢は同様です。

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
+        "prettier"
    ],
    "overrides": [],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
+        "react/react-in-jsx-scope": "off"
    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
}

ルート直下の「.eslintrc.json」を上記のように修正します。
⚠️ 2026年時点の注意：ESLint v9以降ではflat config（eslint.config.js）が標準となっています。本記事は従来の.eslintrc.jsonベースで解説していますが、新規プロジェクトではflat configの採用も検討してください。

これがないと不要なエラーが出てしまいます。

ESLintのコマンドを追加

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
+    "lint": "eslint --fix --ext .tsx,.ts,.jsx,.js ."
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.36.0",
    "eslint-plugin-react": "^7.32.2",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
}

上記のように「/package.json」を修正し、lintコマンドを追加してください。

ViteでESLintが起動するように設定する

yarn add -D vite-plugin-checker

上記のコマンドでVite上でESLintを使う際に必要なライブラリをインストールします。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ import checker from "vite-plugin-checker";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
+    checker({
+      typescript: false,
+      eslint: {
+        lintCommand: 'eslint --ext .tsx,.ts,.jsx,.js .',
+      },
+    }),
  ],
})

上記のように「vite.config.ts」（またはvite.config.js）を修正します。

ステップ3：Prettierの設定

Prettierのインストール

yarn add -D prettier

上記のコマンドでPrettierをインストールします。

Prettierのコマンドを追加

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --fix --ext .tsx,.ts,.jsx,.js .",
+    "format": "prettier --write src"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.36.0",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.4",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vite-plugin-checker": "^0.5.6"
  }
}

「/package.json」を上記のように修正し、フォーマットコマンドを追加してください。

Prettierの設定を追加

ルート直下に「.prettierrc」ファイルを作成し、以下のように設定します。

{
  "singleQuote": false
}

これで「シングルクオートではなくダブルクオートを使う」という設定が完了です。
他にもPrettierには多くのオプションがあるので、チームの好みに合わせて調整してください。

ステップ4：ESLintとPrettierを連携させる

eslint-config-prettierのインストール

yarn add -D eslint-config-prettier

eslint-config-prettierはESLintとPrettierのルールの衝突を解消するライブラリです。
（eslint-plugin-prettierは非推奨のため使いません）

衝突チェックコマンドの追加

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --fix --ext .tsx,.ts,.jsx,.js .",
    "format": "prettier --write src",
+    "conflict": "eslint-config-prettier 'src/**/*.{ts,tsx,js,jsx}'"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.4",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vite-plugin-checker": "^0.5.6"
  }
}

「yarn conflict」でESLintとPrettierの設定に重複・衝突するものがないか確認できます。

ステップ5：一括実行コマンドの追加

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --fix --ext .tsx,.ts,.jsx,.js .",
    "format": "prettier --write src",
    "conflict": "eslint-config-prettier 'src/**/*.{ts,tsx,js,jsx}'",
+    "fix": "tsc && yarn conflict && yarn lint && yarn format"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.4",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vite-plugin-checker": "^0.5.6"
  }
}

「yarn fix」を実行すると以下を一括で行います。

① TypeScriptの型エラーチェック
② ESLintとPrettierの設定衝突チェック
③ ESLintでコードをチェック＆自動修正
④ Prettierでコードをフォーマット

ステップ6：動作確認

開発サーバーでESLintエラーを確認する

yarn dev

上記のコマンドでViteの開発サーバーを起動します。

上記のようにESLintのエラーがターミナルに表示されれば設定成功です！
「Ctrl + C」でサーバーを停止しましょう。

一括修正コマンドを確認する

yarn fix

「yarn fix」コマンドを実行して動作を確認します。

上記のように自動修正とフォーマットが実行されれば完了です。

おまけ：参考動画

あわせて読みたい
Reactでeslintとprettierを使用する 【方針】 今回はReactでeslintとprettierを使用する手順について説明します。eslint-plugin-prettierは現在非推奨のため使いません。 【手順】 create-react-appでプロ...
あわせて読みたい
Viteで作成したReactアプリにeslintを導入する 【はじめに】 今回はViteで作成したReactアプリにEsLintを導入する手順について説明します。 開発サーバーを起動中に、ミスがあればエラーを表示してくれるのでとても便...

まとめ

この記事では、Vite + React(TypeScript)環境にESLintとPrettierを導入する手順を解説しました。

  • ViteでReact + TypeScriptのプロジェクトを作成
  • ESLintをインストールし、.eslintrc.jsonで設定
  • Viteプラグインを使って開発サーバーでESLintエラーをリアルタイム表示
  • Prettierをインストールし、.prettierrcで設定
  • eslint-config-prettierでESLintとPrettierの競合を解消
  • yarn fixコマンドで型チェック・lint・フォーマットを一括実行

⚠️ 2026年時点での補足：ESLint v9以降ではflat config（eslint.config.js）が標準になっています。また、TypeScript ESLintの設定方法も変化しています。本記事の設定は動作しますが、新規プロジェクトでは公式ドキュメントの最新情報もあわせて確認することをおすすめします。

📌 参考リンク：ESLint 公式ドキュメント | Prettier 公式ドキュメント | Vite 公式サイト

🔗 関連記事：他のフロントエンド開発記事もフロントエンドラボでご覧いただけます。

独学に限界を感じたら、プログラミング教室がお勧めです。
エージェントは複数登録することをお勧めします。カウンセリングを通して、業界について勉強することができます。
フリーランス転職希望の方はフリーランス専門のエージェントを利用しましょう。
独学に限界を感じたら、プログラミング教室がお勧めです。
エージェントは複数登録することをお勧めします。
カウンセリングを通して、業界について勉強することができます。
フリーランス転職希望の方はフリーランス専門のエージェントを利用しましょう
プログラミング React typescript
eslint prettier react typescript vite
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次