メインコンテンツへスキップ

インストール

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

まずローカル環境にPrettierをインストールします：

npm install --save-dev --save-exact prettier@%PRETTIER_VERSION%

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

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

続いて、.prettierignoreファイルを作成し、Prettier CLIとエディタにフォーマット対象外のファイルを伝えます。以下は例です：

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

Prettierは実行ディレクトリに.gitignoreが存在する場合、そのルールに従います。.eslintignoreがある場合は、.prettierignoreのベースとして流用することも可能です。

追加のヒント

プロジェクトでHTMLファイルのフォーマットがまだ不要な場合は、*.htmlを追加してください。

すべてのファイルをPrettierでフォーマットします：

npx prettier . --write
情報

What is that npx thing? npx ships with npm and lets you run locally installed tools. We’ll leave off the npx part for brevity throughout the rest of this file!

警告

If you forget to install Prettier first, npx will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your package.json. And it’s faster, too.

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

CI環境を設定している場合、以下のコマンドを実行して全メンバーがPrettierを使用するようにしてください。これによりマージコンフリクトや共同作業の問題を回避できます！

npx prettier . --check

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

エディタの設定​

コマンドラインからのフォーマットは良いスタートですが、エディタからキーボードショートカット経由で、またはファイル保存時に自動実行することでPrettierの真価を発揮します。コーディング中に行が画面に収まらないほど長くなったら、キーを押すだけで複数行に分割される魔法を体験しましょう！コードを貼り付けた際にインデントが崩れても、エディタを離れることなくPrettierが修正してくれます。

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

注記

通常のローカルインストールを省略しないでください！エディタプラグインはローカルのPrettierバージョンを検出するため、プロジェクトごとに正しいバージョンを使用できます（エディタがプロジェクトより新しいPrettierバージョンを使用して、意図せず大量の変更を発生させる事態を避けられます）。

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

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

ESLintを使用する場合は、eslint-config-prettierをインストールしてESLintとPrettierを協調動作させてください。これによりPrettierと不要な競合を起こす可能性のあるESLintルールが無効化されます。Stylelint向けにも同様の設定があります：stylelint-config-prettier

（フォーマットとリンターの違いについてはPrettier vs. Linters、リンター設定の詳細はIntegrating with Linters、その他の連携可能性についてはRelated projectsを参照してください。）

Gitフック​

コマンドライン（prettier --write）やCIでのフォーマットチェック、エディタからの実行に加えて、多くの開発者がコミット前フックとしてPrettierを実行することを好みます。これにより、CIビルドの完了を待たずにすべてのコミットがフォーマット済みであることを保証できます。

たとえば、各コミットの前にPrettierを実行するには次のように設定します：

  1. huskyとlint-stagedをインストール：
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
  1. package.jsonに以下を追加：
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
注記

ESLintを使用する場合、lint-stagedがPrettierの前にESLintを実行するように設定してください（逆ではありません）。

詳細はコミット前フックを参照してください。

まとめ​

これまでの内容をまとめると、以下のことを学びました：

  • プロジェクト内でPrettierの厳密なバージョンをローカルにインストールする。これにより、プロジェクトの全メンバーが完全に同一のPrettierバージョンを使用できます。パッチリリースさえもフォーマット結果に微妙な差を生む可能性があるため、チームメンバーが異なるバージョンを使用して互いの変更をフォーマットし直す事態は避けるべきです。

  • エディタにPrettierを使用していることを伝えるため.prettierrcを追加する。

  • エディタが対象外とするファイルを指定する.prettierignoreを追加し、同時にprettier --write .でプロジェクト全体をフォーマットできるようにする（不要なファイルを誤って変更したり、自動生成ファイルでエラーが発生するのを防ぐため）。

  • CIでprettier --check .を実行し、プロジェクトのフォーマット状態を維持する。

  • 最適な開発体験を得るため、エディタからPrettierを実行する。

  • PrettierとESLintを連携させるためeslint-config-prettierを使用する。

  • すべてのコミットがフォーマットされるよう、コミット前フックを設定する。