Prettier

1. Node.js をダウンロードしてインストールします。

2. プロジェクトでローカル Node.js インタープリターが構成されていることを確認します。設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | Node.js に移動します。Node インタープリターフィールドには、デフォルトのプロジェクト Node.js インタープリターが表示されます。

   ローカル Node.js インタープリターの構成の詳細を参照してください。

3. 設定で JavaScript と TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

4. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページのマーケットプレースタブに Prettier プラグインをインストールして有効にします。

1. 埋め込まれたターミナル (Alt+F12) を開きます。

2. 次のいずれかのコマンドを入力します。

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

   • npm install --global prettier

1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | JavaScript | Prettier に移動します。

2. JetBrains Rider は Prettier を有効にし、上記のようにインストールするとすぐに Prettier で整形アクションを追加します。Prettier をオフにするには、Prettier を無効にするを選択します。

3. Prettier パッケージと構成ファイルを検出する方法を選択します。

   • 自動 Prettier 構成 : このモードでは、JetBrains Rider は最も近い node_modules (再フォーマットするファイルと同じフォルダーまたはその親フォルダーにある) の Prettier パッケージを使用し、最も近い .prettierrc.* 構成ファイルを検索します。

     その結果、プロジェクトが異なる Prettier 構成を持つ複数のモジュールで構成されている場合、各モジュールは独自の Prettier 構成ファイル (そのような構成が見つかった場合) のルールを使用します。

   • 手動 Prettier 構成 : このモードでは、Prettier パッケージと指定された構成ファイルのルールがプロジェクト内のすべてのモジュールに適用されます。

     Prettier パッケージリストから、使用する prettier インストールを選択します。標準のインストール手順に従った場合、JetBrains Rider は prettier パッケージ自体を見つけて、フィールドに自動的に入力されます。

     

     Prettier をデフォルトのフォーマットツールとして設定するには、'コードの整形' アクション時に実行チェックボックスを選択します。

4. 保存されたファイルに Prettier を自動的に適用するには、保存時チェックボックスを選択します。

5. 「ファイルに対して実行」フィールドでは、ファイルが保存されるとき、またはコードの整形アクションが呼び出されるときに、Prettier が自動的に適用されるファイルパターンを指定します。

   詳細については、保存時に Prettier を自動的に実行するおよび Prettier をデフォルトのフォーマッターとして設定するを参照してください。

1. エディターで、再フォーマットするコードフラグメントを選択します。ファイルまたはフォルダーを再フォーマットするには、ソリューションエクスプローラーで選択します。

2. 次に、コンテキストメニューから Prettier で整形を選択します。

保存時に Prettier を自動的に実行する

1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | Prettier に移動して、保存時に実行チェックボックスを選択します。

2. ファイルに対して実行フィールドで、ファイルが保存されるたびに再フォーマットされるファイルのセットを定義するパターンを指定します。デフォルトのパターンを受け入れるか、カスタムパターンを入力できます。

   デフォルトのパターンである **/*.{js,ts,jsx,tsx,vue,astro} を使用すると、Prettier が起動して更新および保存された JavaScript、TypeScript、JSX、TSX ファイルを処理します。他のタイプのファイルまたは特定のフォルダーに保存されているファイルを再フォーマットするには、glob パターン(英語)を使用してデフォルトのパターン(英語)を更新します。

   • 例: スタイルシートファイルも自動的に再フォーマットするには、次のようにデフォルトパターンに css,sass,scss を追加します。

     **/*.{js,ts,jsx,tsx,vue,astro,css,scss,sass}

   • サブフォルダーを含む特定のフォルダーからファイルを再フォーマットするには、**/* を <path to the folder>/**/* に置き換えます。

     次のような構造のプロジェクトがあるとします。

     

     Prettier を src フォルダー内のファイルにのみ自動的に適用するには、次のようにパターンを更新します。

     src/*.{js,ts,jsx,tsx,vue,astro}

     その結果、ファイル dog.ts は保存時に再フォーマットされ、animal.ts は変更されません。

Prettier をデフォルトのフォーマッターとして設定する

1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | Prettier に移動します。

2. 手動 Prettier 構成を選択し、'コードの整形' アクション時に実行チェックボックスをオンにします。Prettier 構成の詳細については、Prettier パッケージと構成ファイルを検出する方法を選択するを参照してください。

3. ファイルに対して実行フィールドで、常に Prettier で再フォーマットされるファイルのセットを定義するパターンを指定します。デフォルトのパターンを受け入れるか、保存時に Prettier を自動的に実行するに従ってそれをカスタマイズします。

新しいプロジェクトの保存時または再フォーマット時に実行するように Prettier を構成する

1. ファイル | 新規プロジェクトのセットアップ | 新しいプロジェクトの設定 / 環境設定に進みます。開いたダイアログで、言語 & フレームワーク | JavaScript | Prettier に移動します。

2. 'コードの整形' アクション時に実行および On save チェックボックスを使用して、Prettier をトリガーするアクションを指定します。

3. 必要に応じて、保存時に Prettier を自動的に実行する説明に従って、ファイルに対して実行フィールドのデフォルトパターンを更新します。

JetBrains Rider は、Prettier の構成から JetBrains Rider コードスタイル設定にキーコードスタイルルールを適用して、生成されたコード（リファクタリングやクイックフィックス後など）と Prettier ですでに処理されたコードが一貫してフォーマットされるようにできます。

• Prettier が有効になっているプロジェクトで、package.json を開き、タブ上部のペインではいをクリックします。

  

• Prettier コードスタイルを再適用するには（ペインでいいえをクリックするかコードスタイルを変更した後）、Ctrl+Shift+A を押してアクションの検索リストから Prettier コードスタイルルールを適用するを選択します。

Prettier オフィシャル Web サイト(英語)から Prettier コードスタイルルールを構成する方法の詳細を参照してください。