[Next.js] Prettier

概要

今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトにPrettierを適用する方法について説明します。Prettierはコードフォマット(Code formatter)で、コードのスタイルを一貫して管理するのに役立ちます。

Prettier: https://prettier.io/

ここで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/3.prettier

ブログリスト

このブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。

TypeScript ベースの Next.js プロジェクト生成

TypeScriptが適用されたNext.jsにPrettierを使う方法を確認するため、次のコマンドを実行してTypeScriptが適用されたNext.jsプロジェクトを生成します。

npx create-next-app --typescript my-app

Prettier のインストール

次のコマンドを実行してPrettierをインストールします。

npm install --save-dev prettier

Prettier の設定

今度はインストールしたPrettierを使うため設定する必要があります。.prettierrc.jsファイルを生成して次のように修正します。

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
};

semi: false: Next.jsは基本的最後のセミコロン(;)を使わないです。
singleQuote: true: Next.jsは基本的シングルクォーテーション(')を使います。
trailingComma: ‘all’: 変更点を最初化するため、コンマが追加できるところは、最後にコンマを追加します。

スクリプトの設定

このように設定したPrettierを使うため、package.jsonファイルを開いて次のようにスクリプトを追加します。

"scripts": {
  ...
  "format": "prettier --check --ignore-path .gitignore .",
  "format:fix": "prettier --write --ignore-path .gitignore ."
},

--ignore-pathのオプションで.gitignoreファイルを選択して、Gitで管理してないファイルは検査しないように設定しました。

実行

次は下記のコマンドを実行して上で設定したPrettierの内容でコードを検査してみます。

npm run format

もし、設定した Prettier のオプションに違反されたファイルがある場合は、次のように表示されます。

Checking formatting...
[warn] .prettierrc.js
[warn] pages/api/hello.ts
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

下記のコマンドを実行して、エラーを治すことができます。

npm run format:fix

全てのファイルが修正されたら、次のコマンドを実行して検査してみます。

npm run format

全てのファイルがうまく修正されたら、次のような結果が表示されます。

Checking formatting...
All matched files use Prettier code style!

完了

今回のブログポストではNext.jsプロジェクトにPrettierを設定する方法についてみてみました。私はVSCodeを使っていて、Prettierのプラグインを使ってますが、保存する時、自動でセミコロンとダブルクォーテーションがつく問題がありました。それで、Next.jsでPrettier適用する方法に関してブログを書きました。皆さんも私と同じ問題が発生している場合は、Next.jsのプロジェクトにPrettierを設定してみてください。