インストール

まず、Prettierをローカルにインストールします。

npm

yarn

pnpm

bun

npm install --save-dev --save-exact prettier

yarn add --dev --exact prettier

pnpm add --save-dev --save-exact prettier

bun add --dev --exact prettier

次に、空の設定ファイルを作成して、エディタや他のツールにPrettierを使用していることを知らせます。

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

次に、.prettierignore ファイルを作成して、Prettier CLIとエディタに、フォーマットしないファイルを知らせます。例を次に示します。

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

ヒント！ Prettierは、実行されるディレクトリと同じディレクトリに.gitignoreが存在する場合、そのルールに従います。また、.prettierignoreを.eslintignore（存在する場合）に基づかせることもできます。

もう1つのヒント！プロジェクトがHTMLファイルなどをフォーマットする準備ができていない場合は、*.htmlを追加します。

それでは、すべてのファイルをPrettierでフォーマットします。

npm

yarn

pnpm

bun

npx prettier . --write

npxとは何ですか？ npxはnpmに付属しており、ローカルにインストールされたツールを実行できます。このファイルの残りの部分では、簡潔にするためにnpxの部分を省略します！

注：最初にPrettierをインストールするのを忘れた場合、npxは最新バージョンを一時的にダウンロードします。Prettierを使用する場合、これはお勧めできません。なぜなら、リリースごとにコードのフォーマット方法が変更されるからです！ package.jsonでPrettierのバージョンを固定することが重要です。また、その方が高速です。

yarn prettier . --write

最初にyarnは何をしているのですか？ yarn prettierは、ローカルにインストールされたバージョンのPrettierを実行します。このファイルの残りの部分では、簡潔にするためにyarnの部分を省略します！

pnpm exec prettier . --write

最初にpnpmは何をしているのですか？ pnpm prettierは、ローカルにインストールされたバージョンのPrettierを実行します。このファイルの残りの部分では、簡潔にするためにpnpmの部分を省略します！

bun prettier . --write

最初にbunは何をしているのですか？ bun prettierは、ローカルにインストールされたバージョンのPrettierを実行します。このファイルの残りの部分では、簡潔にするためにbunの部分を省略します！

prettier --write .はすべてをフォーマットするのに最適ですが、大きなプロジェクトでは少し時間がかかる場合があります。特定のディレクトリをフォーマットするにはprettier --write app/を実行し、特定のファイルをフォーマットするにはprettier --write app/components/Button.jsを実行します。または、prettier --write "app/**/*.test.js"のような*グロブ*を使用して、ディレクトリ内のすべてのテストをフォーマットします（サポートされているグロブ構文については、fast-globを参照してください）。

CI設定がある場合は、その一部として以下を実行して、全員がPrettierを実行していることを確認します。これにより、マージの競合やその他の共同作業の問題を回避できます！

npx prettier . --check

--checkは--writeに似ていますが、ファイルを上書きするのではなく、ファイルがすでにフォーマットされているかどうかのみをチェックします。 prettier --writeとprettier --checkは、Prettierを実行する最も一般的な方法です。

エディタの設定

コマンドラインからのフォーマットは開始するには良い方法ですが、キーボードショートカットを介して、またはファイルを保存するたびに自動的にエディタからPrettierを実行することで、Prettierを最大限に活用できます。コーディング中に画面に収まらないほど長くなった行は、キーを押すだけで魔法のように複数行に折り返されます！また、コードを貼り付けてインデントがすべてめちゃくちゃになった場合は、エディタを離れることなくPrettierに修正させてください。

エディタの設定方法については、エディタ統合を参照してください。エディタがPrettierをサポートしていない場合は、代わりにファイルウォッチャーでPrettierを実行できます。

注：通常のローカルインストールをスキップしないでください！エディタプラグインはローカルバージョンのPrettierを取得するため、すべてのプロジェクトで正しいバージョンを使用できます。（エディタがプロジェクトよりも新しいバージョンのPrettierを使用しているために、誤って多くの変更が発生することを望まないでしょう！）

また、コマンドラインからPrettierを実行できることは、依然として優れたフォールバックであり、CI設定に必要です。

ESLint（およびその他のリンター）

ESLintを使用する場合は、eslint-config-prettierをインストールして、ESLintとPrettierを連携させます。不要な、またはPrettierと競合する可能性のあるすべてのESLintルールをオフにします。Stylelintにも同様の設定があります：stylelint-config-prettier

（フォーマットとリンティングの詳細については、Prettierとリンターの違いを、リンターの設定の詳細については、リンターとの統合を、さらに統合の可能性については、必要に応じて関連プロジェクトを参照してください。）

Gitフック

コマンドライン（prettier --write）からPrettierを実行し、CIでフォーマットをチェックし、エディタからPrettierを実行することに加えて、多くの人がPrettierをpre-commitフックとしても実行することを好みます。これにより、CIビルドの完了を待たなくても、すべてのコミットがフォーマットされます。

たとえば、コミットごとにPrettierを実行するには、次のようにします。

huskyとlint-stagedをインストールします。

npm

yarn

pnpm

bun

npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"

yarn add --dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"

Yarn 2を使用する場合は、https://typicode.github.io/husky/#/?id=yarn-2を参照してください。

pnpm add --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"

bun add --dev husky lint-staged
bunx husky init
bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"

package.jsonに以下を追加します。

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

注：ESLintを使用する場合は、lint-stagedがPrettierの後にではなく、前に実行されていることを確認してください。

詳細については、Pre-commit Hookを参照してください。

まとめ

要約すると、私たちは以下を学びました。

プロジェクトでPrettierの正確なバージョンをローカルにインストールします。これにより、プロジェクトの全員がまったく同じバージョンのPrettierを使用できるようになります。Prettierのパッチリリースでもフォーマットがわずかに異なる可能性があるため、チームメンバーが異なるバージョンを使用して互いの変更を前後にフォーマットし続けることは望ましくありません。
Prettierを使用していることをエディタに知らせるために、.prettierrcを追加します。
エディタに触れてはいけないファイル、およびプロジェクト全体をフォーマットするためにprettier --write .を実行できるファイル（不要なファイルを改ざんしたり、生成されたファイルで詰まったりすることなく）を知らせるために、.prettierignoreを追加します。
CIでprettier --check .を実行して、プロジェクトのフォーマットが維持されていることを確認します。
最高のエクスペリエンスを得るために、エディタからPrettierを実行します。
PrettierとESLintを連携させるために、eslint-config-prettierを使用します。
すべてのコミットがフォーマットされていることを確認するために、pre-commitフックを設定します。