はじめに
この記事では、ESLint の Flat Config を利用しているプロジェクトで Prettier を併用する方法について記載します。
元々 ESLint でもフォーマットは可能でしたが、2023年11月にリリースされた v8.53.0 からフォーマットルールが廃止されました。
フォーマットルール廃止についてアナウンスした以下のブログ記事では、代わりに Prettier もしくは dprint の利用を推奨しています。
そのため、今回は Prettier を併用する方法を試してみます。
開発環境
開発環境は以下の通りです。
- 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 環境における詳細手順はこちら。
Prettier のインストール
Prettier をインストールします。
npm install --save-dev --save-exact prettier
設定ファイル（.prettierrc）を追加します。
以下のコマンドを実行すると、ファイル内に {} とだけ記載されたファイルが作成されます。
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
フォーマット対象外のファイルを指定するファイル（.prettierignore）を作成します。
今回のファイルの中身は Prettier のドキュメントのサンプルと同じ、以下のファイルを指定しておきます。
# Ignore artifacts:
build
coverage
2024年8月追記
以下のコマンドでも作成できます。
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
これで Prettier の設定は完了です。
以下のコマンドでフォーマットを実行できます。
npx prettier . --write
eslint-config-prettier のインストール
不要、もしくは Prettier とコンフリクトするルールを無効にするため、eslint-config-prettier をインストールします。
eslint-config-prettier をインストールします。
npm install --save-dev eslint-config-prettier
eslint.config.js に eslint-config-prettier を追加します。
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
];
eslintConfigPrettier は設定を上書きしたい他の設定の後に記載する必要があります。
冒頭で述べた通り ESLint v8.53.0 で ESLint のフォーマットに関するルールは廃止されたので、そもそもこの手順は省いても問題ないかもと思いましたが、eslint-config-prettier のドキュメントにも eslint.config.js（Flat Config）でも設定方法が記載してあったので、今回は設定してみました。
これで設定は完了です。