osgsm
← Back to Blog

既存の Next.js プロジェクトに Prettier を導入する

前回は ESLint を導入したので、今回は Prettier を導入していきます。

Prettier と ESLint を併用する際のコンフリクトの解消や、 Visual Studio Code での自動フォーマット設定も行っていきます。

パッケージのインストール

ESLint にはコードフォーマット用のルールも含まれていて、 Prettier と併用するときに、コンフリクトが生じることがあります。

このコンフリクトを解消するためには、 eslint-config-prettier を使います。これは Prettier とコンフリクトする可能性のある ESLint ルールを無効にするためのものです。

なので、今回は Prettier 本体である prettier と、コンフリクト解消用の eslint-config-prettier の2つのパッケージをインストールします。

Terminal
yarn add -D prettier eslint-config-prettier

eslint-config-prettier の設定

次に、コンフリクトするルールを無効にするために、 .eslintrc.json の "extends" に "prettier" を追加します。

.eslintrc.json
{
 "extends": ["next/core-web-vitals", "prettier"]
}

"prettier" は最後に書く必要があるので要注意。なぜなら、他の設定を上書きするからです。

コンフリクトがないかをチェックする

eslint-config-prettier は、 CLI ツールも提供しており、これを使うことでコンフリクトの有無をチェックできます。

Terminal
yarn eslint-config-prettier '**/*.{js,jsx,ts,tsx}'

現状では、特にルールの追加などを行っていないので、コンフリクトは見つかりません。コンフリクトがない場合、次のように表示されます。

Terminal
No rules that are unnecessary or conflict with Prettier were found.

コンフリクトがある場合

それでは、試しにコンフリクトするルールを追加してみましょう。 .eslintrc.json に次のルールを追加します。

.eslintrc.json
{
 "extends": ["next/core-web-vitals", "prettier"],
 "rules": {
  "indent": "error"
 }
}

もう一度 eslint-config-prettier を実行してみます。

Terminal
% yarn eslint-config-prettier '**/*.{js,jsx,ts,tsx}'
The following rules are unnecessary or might conflict with Prettier:
 
- indent

すると、コンフリクトするルールがリストアップされます。このルールは不要なので、 .eslintrc.json から削除しておきましょう。

これで eslint-config-prettier に関する設定は完了です。次は Prettier の設定に進みます。

Prettier の設定

Prettier の設定には、 .prettierrc.json と .prettierignore というファイルを使います。前者は設定ファイルで、後者はフォーマットしたくないファイルを指定するものです。

まずは、それらのファイルを作成します。

Terminal
touch .prettierrc.json .prettierignore

.prettierrc.json

.prettierrc.json の内容は、次のようにします。

.prettierrc.json
{
  "singleQuote": true
}

基本的にデフォルトの値を使いたいので、 "singleQuote" のみ true にしています。 Options · Prettier に設定可能な項目がリストアップされているので、これを参考に適宜調整してください。

.prettierignore

.prettierignore の内容は、次のようにします。

.prettierignore
node_modules
.next
yarn.lock
public
posts

これで、リストアップしたファイルやディレクトリ内のファイルはフォーマットされません。

これで Prettier の設定は完了です。

Prettier を使う

prettier --write

Prettier を使うには、次のコマンドを実行します。

Terminal
yarn prettier --write .

これでフォーマット対象のファイルがすべてフォーマットされます。

prettier --check

次のように --check オプションを使うと、フォーマットされているかどうかをチェックできます。このとき、ファイルは上書きされません。

Terminal
yarn prettier --check .

すべてフォーマット済みであれば次のように表示されます。

Terminal
All matched files use Prettier code style!

package.json に script を追加する

Prettier を実行するときに yarn prettier --write . と入力するのは手間なので、 package.json に script を追加しましょう。

package.json
"scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
 "lint": "next lint",
 "format": "prettier --write ."
},

こうすることで yarn format と実行するだけで、フォーマット対象のファイルがすべてフォーマットされます。

さらに、エディターの設定を行うと、ファイル保存時に自動フォーマットされてとても便利です。なので、その設定も行っていきましょう。

Visual Studio Code の設定

今回は Visual Studio Code での設定方法を解説します。

まずは、 Prettier - Code formatter - Visual Studio Marketplace から拡張機能をインストールし、有効化します。

次に、デフォルトのフォーマッターとして Prettier を使うために、 Visual Studio Code の settings.json に次の項目を追加します。併せて "editor.formatOnSave" を true にしています。

settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
}

これでファイル保存時に自動的にフォーマットされます。

さいごに

前回 ESLint を設定し、今回は Prettier を設定したので、ようやく環境が整いました。

次は、 Tailwind CSS を使ってスタイリングを行っていく予定です。

参考

← Back to Home