Bun+ReactのプロジェクトにPrettier設定を入れる

はじめに

Prettier は、コードフォーマッターとして有名なツールで、コードのスタイルを統一し、読みやすくすることができます。
チームで開発する際は、必ず初期の段階で入れるようにしましょう。

環境

以下で構築した環境を使用しています。 (Bun + React + Vite)

手順

早速、公式サイトの手順に沿って、prettier を導入していきます。

インストール

以下のコマンドを実行します。

bun add --dev --exact prettier

これで Prettier がプロジェクトに追加されます。

基本設定

プロジェクトのルートに .prettierrc.yaml ファイルを作成して、設定を記述します。

trailingComma: 'es5'
tabWidth: 2
semi: false
singleQuote: true

JSON等他の形式も対応していますので、その辺りはお好みで。

各オプションの説明

• semi: 行末にセミコロンを付けるかどうか
• singleQuote: シングルクォートを使用するか
• trailingComma: 配列やオブジェクトの末尾にカンマを付けるか (es5はES5で有効なカンマをつける)
• tabWidth: インデントのスペース数
• printWidth: 1行の最大文字数

詳細は公式サイトを参照してください
https://prettier.io/docs/en/options.html

(不要) 除外設定

.prettierignore ファイルを作成ると、フォーマットファイルから除外するファイルを指定できます。
しかし、バージョンコントールのディレクトリ (.gitなど) や node_modules 、 .gitignore に記載されているものはデフォルトで除外されます。
今回は必要なさそうなのでスキップします。

スクリプトの追加

package.json にフォーマット用のスクリプトを追加します。

  "scripts": {
    "dev": "bunx --bun vite",
    "build": "tsc -b && bunx --bun vite build",
    "lint": "eslint .",
+   "format": "prettier --write .",
+   "format-check": "prettier --check .",
    "preview": "bunx --bun vite preview"
  },
}

• format: プロジェクト全体をフォーマットする
• format-check: チェックのみを事項する

(不要) ESLint の設定追加

以前は、ESLint 側にPrettierと競合する無効化する設定が必要でしたが、ESLint v8.53.0 からフォーマット関連のルールがdeprecateになり、必要なくなったようです。

フォーマットの実行

以下のコマンドを使用してフォーマットを実行します。

bun run format

無事にフォーマットが実行されました。

$ prettier --write .
.prettierrc.yaml 11ms (unchanged)
eslint.config.js 28ms
index.html 16ms (unchanged)
package.json 1ms
README.md 24ms (unchanged)
src/App.css 19ms (unchanged)
src/App.tsx 39ms
src/index.css 4ms (unchanged)
src/main.tsx 4ms (unchanged)
src/vite-env.d.ts 1ms (unchanged)
tsconfig.app.json 4ms (unchanged)
tsconfig.json 0ms (unchanged)
tsconfig.node.json 1ms (unchanged)
vite.config.ts 1ms (unchanged)

例として、src/App.tsx を見ると、以下のように整形されているのが分かります。

まとめ

本記事では、プロジェクトで Prettier を導入しました。
この辺りをやるのも久しぶりなので、記事を残しながら実施してみました。