【2025最新】ESLint Flat Config + Prettier + VSCode 設定ガイド

はじめに

こんにちは。グリーエックス株式会社のおかざき ( @cakegaly ) です。

最近、「 GREEニュースグルメ」をはじめとする複数の Next.js プロダクトを v15 にバージョンアップしました。これにあわせて、ESLint v9 の Flat Config にも対応し、Prettier や VSCode の設定も整理しました。

2025/6 現在、Flat Config の情報はまだ少なく、未対応のプラグインも残っています。この記事では、実際に移行した構成と注意したポイントを紹介します。導入しようとしてハマった方や、これから整備したい方の参考になればうれしいです。

ESLint Flat Config とは？

ESLint Flat Config は、ESLint v9 以降でデフォルトになった新しい設定方式です。 JavaScript のモジュールベース (eslint.config.mjs, eslint.config.js, eslint.config.cjs など) で設定するため、ルール設定とプラグインとの依存関係をより明確に整理できるようになりました。また、.eslintignore が不要になり、ignore 対象もまとめて管理できるようになりました。さらに、公式による最適化で、パフォーマンスも向上しているようです。

従来の .eslintrc.* の形式は deprecated 扱いとなり、 ESLint v10 以降では削除するとされています。 Next.js v15 以降でも ESLint v9 がサポートされており、今後のメンテナンス性を考えても Flat Config に移行するのがよさそうです。

ESLint Flat Config 移行手順

もとの eslint ルールは、少し煩雑になっていました。せっかくなので、ゼロから Flat Config ルールを記述して進めてみることにします。

`eslint` 本体の追加 (or バージョンアップ)

まずは、共通するパッケージの導入です。eslint 本体を、最新のバージョンで追加します。

pnpm add -D eslint@latest

以降では、eslint.config.mjs に設定を書いていきます。

対象ファイルと ignore 設定

Flat Config では、.eslintignore は不要になりました。このため、.eslintignore を削除して eslint.config.mjs の ignore フィールドに、lint 対象から除外するファイルを指定します。

const config = [
  {
    ignores: [
      '**/build/',
      '**/bin/',
      '**/dist/',
      '**/obj/',
      '**/out/',
      '**/.next/',
      '**/node_modules/',
    ],
  },
];
 
export default config;

TypeScript / React / Next.js 基本ルール設定

これまでは、eslint-config-next を利用していました。しかし、2025/6 現在、eslint-config-next は、まだ Flat Config に対応していません。

そこで、こちらを参考に、eslint-config-next が提供するルールセットの本体である eslint-plugin-react, eslint-plugin-react-hooks, @next/eslint-plugin-next を個別で導入することにしました。

pnpm remove eslint-config-next
pnpm add -D eslint-plugin-react eslint-plugin-react-hooks @next/eslint-plugin-next

また、@typescript-eslint/parser, @typescript-eslint/eslint-plugin は、 typescript-eslint に統合されているため、削除して、統合パッケージであるtypescript-eslint を導入します。これにより、TypeScript の推奨ルールと、型情報を含めたチェックを有効にします。

pnpm remove @typescript-eslint/parser @typescript-eslint/eslint-plugin
pnpm add -D typescript-eslint

これらをもとに、ESLint, TypeScript, React, Next.js の推奨ルールを設定します。

import eslintJs from '@eslint/js';
import pluginNext from '@next/eslint-plugin-next';
import pluginReact from 'eslint-plugin-react';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import pluginTypeScript from 'typescript-eslint';
 
const config = [
  // ...
  {
    name: 'eslint/recommended',
    rules: eslintJs.configs.recommended.rules,
  },
  ...pluginTypeScript.configs.recommended,
 
  {
    name: 'react/jsx-runtime',
    plugins: {
      react: pluginReact,
    },
    rules: pluginReact.configs['jsx-runtime'].rules,
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
  {
    name: 'react-hooks/recommended',
    plugins: {
      'react-hooks': pluginReactHooks,
    },
    rules: pluginReactHooks.configs.recommended.rules,
  },
 
  {
    name: 'next/core-web-vitals',
    plugins: {
      '@next/next': pluginNext,
    },
    rules: {
      ...pluginNext.configs.recommended.rules,
      ...pluginNext.configs['core-web-vitals'].rules,
    },
  },
  // ...
];
 
export default config;

Prettier 設定

ESLint と Prettier でルールが競合するのを防ぐため、eslint-config-prettier を導入します。

pnpm add -D eslint-config-prettier

これを、ルールセットの末尾に足します。

import configPrettier from 'eslint-config-prettier';
 
const config = [
  // ...
  {
    name: 'prettier/config',
    ...configPrettier,
  },
];
 
export default config;

プロジェクトのカスタムルール設定

プロジェクト固有のカスタムルールがある場合は、最後に追加しておきます。

const config = [
  // ...
  {
    name: 'project-custom',
    rules: {
      '@typescript-eslint/no-empty-object-type': 'off',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
];
 
export default config;

Prettier Flat Config 設定

`prettier` 本体の追加 (or バージョンアップ)

まずは、prettier 本体を、最新のバージョンで追加します。

pnpm add -D prettier@latest

eslint.config.mjs と同様に、Prettier 設定も prettier.config.mjs に移行します。 .prettierrc を prettier.config.mjs にリネームして、ルールを設定していきます。

Prettier フォーマットルール設定

個人の好み、プロジェクト方針などによって変わる部分ですが、基本となるルールは、以下のように設定しています。

const config = {
  endOfLine: 'lf',
  printWidth: 80,
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
};
 
export default config;

ここに、prettier-plugin-tailwindcss と @ianvs/prettier-plugin-sort-imports を追加します。

pnpm add -D prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports

prettier-plugin-tailwindcss は、Tailwind CSS のユーティリティクラスを自動で並び替えてくれるプラグインです。 cn() (cva(), clsx()) などのユーティリティと組み合わせると、可読性が上がるだけでなく、チーム内でのクラス順序の統一にも役立ちます。 @ianvs/prettier-plugin-sort-imports は、import 文の順序を自動整形するプラグインです。並び順のルールを設定してグループ分けすることで、可読性やコンポーネントの依存関係がとてもわかりやすくなります。

const config = {
  // ...
  importOrder: [
    '^(react/(.*)$)|^(react$)',
    '^(next/(.*)$)|^(next$)',
    '<THIRD_PARTY_MODULES>',
    '',
    '^types$',
    '^@/env(.*)$',
    '^@/types/(.*)$',
    '^@/config/(.*)$',
    '^@/lib/(.*)$',
    '^@/hooks/(.*)$',
    '',
    '^@/features/(.*)$',
    '^@/components/shadcn-ui/(.*)$',
    '^@/components/(.*)$',
    '^@/styles/(.*)$',
    '^@/app/(.*)$',
    '',
    '^[./]',
  ],
  importOrderParserPlugins: ['typescript', 'jsx'],
 
  plugins: [
    '@ianvs/prettier-plugin-sort-imports',
    'prettier-plugin-tailwindcss',
  ],
};
 
export default config;

なお、ignores フィールドで対象外のファイルをまとめて指定できた ESLint とは異なり、Prettier では、Flat Config においても .prettierignore で無視するファイルを設定する必要があります。

# Build outputs
.next/
build/
dist/
out/
coverage/
 
# Dependencies
node_modules/
yarn.lock
package-lock.json
pnpm-lock.yaml
 
# Environment and config
.env*

VSCode でファイル保存時に自動フォーマットする設定

チーム内での Linter, Formatter 設定を共通にするため、.vscode/settings.json に、以下を追加して、ファイル保存時に自動で ESLint + Prettier が動くように設定します。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.insertFinalNewline": true,
 
  "biome.enabled": false,
  "eslint.enable": true,
  "eslint.useFlatConfig": true,
  "eslint.options": {
    "overrideConfigFile": "./eslint.config.mjs"
  }
}

必要となる VSCode の拡張機能は、.vscode/extensions.json にまとめておきます。これにより、VSCode さえ導入しておけば、すぐに同じ開発設定を適用できるようになります。

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ]
}

導入したパッケージ一覧

まとめ

Flat Config に移行した結果、必要なルールだけをシンプルに記述できて、レビューや調整もやりやすくなりました。特に、「どのルールが、どこに由来しているのか」がすぐにわかるようになったため、メンテナンスが楽になったと感じています。

Flat Config に未対応のプラグインがあるなど、これからの動向が気になる部分もありますが、 React, TypeScript で快適に開発するための設定は、網羅できたと思います。

一度、構成を整理しておくことで、今後の ESLint や Prettier のアップデートにも対応しやすくなりそうです。長く付き合う開発プロジェクトほど、Flat Config を早めに取り入れておくと安心だと感じました。

ぜひ、まだ移行されていない方も、この機会に試してみてください！