【ESLint】Flat Config で Prettier を併用する

# はじめに
この記事では、ESLint の Flat Config を利用しているプロジェクトで Prettier を併用する方法について記載します。

https://prettier.io/

元々 ESLint でもフォーマットは可能でしたが、2023年11月にリリースされた v8.53.0 からフォーマットルールが廃止されました。

https://github.com/eslint/eslint/releases/tag/v8.53.0

フォーマットルール廃止についてアナウンスした以下のブログ記事では、代わりに Prettier もしくは [dprint](https://dprint.dev/) の利用を推奨しています。
そのため、今回は Prettier を併用する方法を試してみます。

https://eslint.org/blog/2023/10/deprecating-formatting-rules/

# 開発環境
開発環境は以下の通りです。

- Windows 11
- VSCode
- TypeScript 5.2.2
- React 18.3.1
- Vite 5.3.1
- Node.js 20.15.0
- npm 10.8.1
- ESLint 8.57.0
- Prettier 3.3.2
- @eslint/js 9.6.0
- eslint-config-prettier 9.1.0
- eslint-plugin-react 7.34.3
- globals 15.8.0
- typescript-eslint 7.15.0

# 事前準備
プロジェクトに ESLint のインストール・設定をしておきます。
React / TypeScript 環境における詳細手順はこちら。

https://qiita.com/Yasushi-Mo/items/c2e259f8e2a86b79cb8a

# Prettier のインストール
Prettier をインストールします。

```powershell
npm install --save-dev --save-exact prettier
```

設定ファイル（`.prettierrc`）を追加します。
以下のコマンドを実行すると、ファイル内に `{}` とだけ記載されたファイルが作成されます。

```powershell
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
```

フォーマット対象外のファイルを指定するファイル（`.prettierignore`）を作成します。
今回のファイルの中身は Prettier のドキュメントのサンプルと同じ、以下のファイルを指定しておきます。

```.prettierignore
# Ignore artifacts:
build
coverage
```

https://prettier.io/docs/en/install

:::note
2024年8月追記
以下のコマンドでも作成できます。

```powershell
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
```

:::

これで Prettier の設定は完了です。
以下のコマンドでフォーマットを実行できます。

```powershell
npx prettier . --write
```

# `eslint-config-prettier` のインストール
不要、もしくは Prettier とコンフリクトするルールを無効にするため、`eslint-config-prettier` をインストールします。

https://github.com/prettier/eslint-config-prettier

`eslint-config-prettier` をインストールします。

```powershell
npm install --save-dev eslint-config-prettier
```

`eslint.config.js` に `eslint-config-prettier` を追加します。

```eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
import pluginReactJSXRuntime from "eslint-plugin-react/configs/jsx-runtime.js";
import eslintConfigPrettier from "eslint-config-prettier"; // Add

export default [
  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
    settings: {
      react: {
        version: "detect",
      },
    },
  },
  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReactConfig,
  pluginReactJSXRuntime,
  eslintConfigPrettier, // Add
];

```

:::note
`eslintConfigPrettier` は設定を上書きしたい他の設定の後に記載する必要があります。
:::

:::note
冒頭で述べた通り ESLint v8.53.0 で ESLint のフォーマットに関するルールは廃止されたので、そもそもこの手順は省いても問題ないかもと思いましたが、`eslint-config-prettier` のドキュメントにも `eslint.config.js`（Flat Config）でも設定方法が記載してあったので、今回は設定してみました。
:::

これで設定は完了です。

# 参考
- [dprint](https://dprint.dev/)
- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)
- [Flat config rollout plans](
https://eslint.org/blog/2023/10/flat-config-rollout-plans/)
- [Getting Started with ESLint](https://eslint.org/docs/latest/use/getting-started)
- [Install](https://prettier.io/docs/en/install)
- [Prettier](https://prettier.io/)