Prettier
Prettier (英語) は、 TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。 JetBrains Rider を使うと、選択したコード箇所やファイル全体、ディレクトリも Prettier で整形 アクションでフォーマットできます。 Prettier をプロジェクトの依存関係として、またはコンピューターにグローバルにインストールすると、JetBrains Rider はこのアクションをすぐに追加します。
Prettier を設定して、特定のファイルが変更され保存されるたびに自動または手動で整形することができます。詳細は 保存時に Prettier を自動実行を参照してください。
また、Prettier を特定のファイルの デフォルトのフォーマッタとして設定することもできます。 Ctrl+Alt+L でコードを再フォーマットするたびに、このようなファイルに対して実行されます。
詳細については、 Prettier でコードを整形 を参照してください。
始める前に
Node.js をダウンロードしてインストールします。
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに Prettier プラグインをインストールして有効にします。
Prettier をインストールする
埋め込まれた ターミナル (Alt+F12) を開きます。
次のいずれかのコマンドを入力してください：
npm install --save-dev --save-exact prettiernpm install --global prettier
Prettier オフィシャル Web サイト(英語)のインストールモードの詳細を参照してください。
JetBrains Rider で Prettier を構成する
JetBrains Rider をインストールするとすぐに Prettier が有効になり、 Prettier で整形 アクションが 上記のように追加されます。 Prettier をオフにするには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 言語 & フレームワーク | JavaScript | Prettier に移動して、 Prettier を無効化 を選択します。
サポートされている設定ファイルの形式
JetBrains Rider は次のファイルタイプで Prettier の構成を認識します：
.prettierrc.json 、 .prettierrc.yml 、 .prettierrc.yaml 、または .prettierrc.json5
.prettierrc.js 、 prettier.config.js 、 .prettierrc.mjs 、 prettier.config.mjs 、 .prettierrc.cjs 、 prettier.config.cjs 、 .prettierrc.toml
.prettierrc.ts 、 prettier.config.ts 、 .prettierrc.mts 、 prettier.config.mts 、 .prettierrc.cts 、 prettier.config.cts
Prettier オフィシャル Web サイト(英語)の詳細を参照してください。
自動 Prettier 構成
このモードでは、 ファイル実行パターンに一致するファイルごとに次の処理が行われます。
JetBrains Rider は、整形対象ファイルと同じフォルダーまたはその親フォルダー内にある最も近い node_modules フォルダーの Prettier パッケージを使用します。
JetBrains Rider は最も近い 構成ファイルを自動的に検出し、そこから設定を適用します。
JetBrains Rider はフォルダー ツリーの上位に向かって .prettierignore ファイルを検索し、最初に見つかったファイルの設定を使用します。
自動 Prettier 構成 を利用すると、Prettier は該当する package.json にリストされている Prettier の依存関係のスコープ内のファイルのみに適用されます。 この動作を変更するには、 手動 Prettier 構成 を選択し、 Prettier 依存スコープ外のファイルに Prettier を適用する チェックボックスをオンにしてください。詳細は 手動 Prettier 構成を参照してください。
プロジェクトが次のように構造化されているとします：
プロジェクトには、プロジェクトルートに .prettierrc 構成ファイルがあります。 また、4 つの package.json ファイルがあり、そのうちの 1 つはプロジェクトルートにあり、その他はサブプロジェクトにあります。 ご覧のとおり、Prettier は、 packages/package_c_with_prettier_dependency サブプロジェクトの package.json にのみ依存関係としてリストされています。 その結果、 packages/package_c_with_prettier_dependency/src のファイルのみが Prettier でフォーマットされます。
Prettier がいずれかの package.json の依存関係としてリストされており、プロジェクトに Prettier 構成ファイルが 1 つ以上ある場合、 .idea フォルダーがない新規プロジェクトでは 自動 Prettier 構成 がデフォルトで有効化されます。
その結果、プロジェクトが異なる Prettier 構成を持つ複数のモジュールで構成されている場合、各モジュールは独自の Prettier 構成ファイル (そのような構成が見つかった場合) のルールを使用します。
何らかの理由で 自動 Prettier 構成 がデフォルトで有効になっていない場合は、自分で有効にすることができます。
自動 Prettier 構成を有効にする
設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語 & フレームワーク | JavaScript | Prettier に移動して 自動 Prettier 構成 を選択します。
保存したファイルに Prettier を自動的に適用するには、 保存時に実行 チェックボックスを選択します。
「ファイルに対して実行 」フィールドでは、ファイルが保存されるとき、または コードの整形 アクションが呼び出されるときに、Prettier が自動的に適用されるファイルパターンを指定します。
デフォルトのパターンでは、Prettier は JavaScript、TypeScript、JSX、TSX、HTML、Vue、Astro ファイルに適用されます。 他の種類のファイルや特定のフォルダーに保存されているファイルを再フォーマットするには、 glob パターン(英語)を使用してデフォルトのパターンを更新します。
例: CoffeeScript ファイルも自動的に再フォーマットするには、次のように
coffeeをデフォルトパターンに追加します。**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}サブフォルダーを含む特定のフォルダーからファイルを再フォーマットするには、
**/*を<path to the folder>/**/*に置き換えます。次のような構造のプロジェクトがあるとします：
coffee フォルダー内のファイルのみを再フォーマットするには、次のようにパターンを更新します。
coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}その結果、ファイル reformat.coffee は再フォーマットされますが、 no_reformatting.coffee は再フォーマットされません。
詳細については、 保存時に Prettier を自動実行すると Prettier をデフォルトフォーマッターに設定するを参照してください。
手動 Prettier 構成
設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語 & フレームワーク | JavaScript | Prettier に移動して 手動 Prettier 構成 を選択します。
Prettier パッケージ リストから、使用する
prettierインストールを選択します。 標準のインストールプロシージャに従うと、JetBrains Rider はprettierパッケージ自体を見つけてフィールドに自動的に入力します。
Prettier をデフォルトのフォーマットツールとして設定するには、 「コードの整形」アクション時に実行 チェックボックスを選択します。
保存したファイルに Prettier を自動的に適用するには、 保存時に実行 チェックボックスを選択します。
Prettier のスコープを設定する
Prettier によって自動的に処理されるファイルを定義するファイル名パターンを指定できます。 また、 .prettierignore ファイルにファイルを追加して、一部のファイルを処理から除外することもできます。
デフォルトでは、Prettier は prettier パッケージが保存されているモジュールだけでなく、他のモジュールにも適用されるため、モノレポでは役立つ場合があります。
設定 ダイアログ (Ctrl+Alt+S) で、 言語 & フレームワーク | JavaScript | Prettier に進みます。
「ファイルに対して実行 」フィールドでは、ファイルが保存されるとき、または コードの整形 アクションが呼び出されるときに、Prettier が自動的に適用されるファイルパターンを指定します。
デフォルトのパターンでは、Prettier は JavaScript、TypeScript、JSX、TSX、HTML、Vue、Astro ファイルに適用されます。 他の種類のファイルや特定のフォルダーに保存されているファイルを再フォーマットするには、 glob パターン(英語)を使用してデフォルトのパターンを更新します。
例: CoffeeScript ファイルも自動的に再フォーマットするには、次のように
coffeeをデフォルトパターンに追加します。**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}サブフォルダーを含む特定のフォルダーからファイルを再フォーマットするには、
**/*を<path to the folder>/**/*に置き換えます。次のような構造のプロジェクトがあるとします：
coffee フォルダー内のファイルのみを再フォーマットするには、次のようにパターンを更新します。
coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}その結果、ファイル reformat.coffee は再フォーマットされますが、 no_reformatting.coffee は再フォーマットされません。
詳細については、 保存時に Prettier を自動実行すると Prettier をデフォルトフォーマッターに設定するを参照してください。
使用する .prettierignore ファイルを指定します。
デフォルトでは、 上記パターン JetBrains Rider に一致するファイルごとに、フォルダーツリーを上方向に .prettierignore を検索し、最初に見つかったものを使用します。 このデフォルトのアプローチは、 自動 Prettier 構成 を選択した場合に常に適用されます。
手動 Prettier 構成 の場合、 .prettierignore へのパス フィールドにもデフォルトで
Detect the .prettierignore file automaticallyが表示されます。 この提案を受け入れるか、
をクリックして使用する .prettierignore を選択します。デフォルトでは、プロジェクトツリーの上位にある node_modules フォルダーに
prettierパッケージがあるかどうかに関係なく、 上記指定のパターンに一致するすべてのファイルに Prettier が自動的に適用されます。 これにより、各サブプロジェクトにprettierパッケージをインストールしなくても、すべてのサブプロジェクトで Prettier を使用できます。prettierパッケージのないサブプロジェクトからのファイルの処理を抑制するには、 手動 Prettier 構成 を選択し、 Prettier 依存スコープ外のファイルに Prettier を適用する チェックボックスをオフにします。
Prettier 言語ステータスウィジェット
設定されたスコープに従って Prettier で処理する必要があるファイルを開くと、ステータスバーに Prettier ウィジェットアイコン 
が表示されます。
このウィジェットから、Prettier 言語サービスを再起動したり、Prettier 構成ファイルを開いて編集したり、Prettier 設定を開いて Prettier 構成を更新したりできます。
Prettier 言語サービスを再起動するには、
をクリックします。Prettier 構成ファイルを開いて編集するには、
をクリックします。JetBrains Rider の Prettier 構成を更新するには、
をクリックします。不正な Node.js バージョン、無効な Prettier パッケージ、プラグインエラー、 言語サービスのタイムアウトなどのエラーが検出されると、
が表示されます。 にマウスを移動すると、問題の説明を含むツールヒントが表示されます。
をクリックして Prettier 構成設定を開きます。
システムリソースの無駄を避けるため、Prettier 言語サーバーは一定時間操作が行われないとタイムアウトで自動的に停止します。 Prettier は、コードのフォーマットや設定の解決（たとえば、コードスタイルの変更）のために呼び出された時点でアクティブとみなされます。
カスタムタイムアウトを設定する
デフォルトのタイムアウトは 5 分です。
メインメニューの に移動するか、 Ctrl+Shift+A を使用して レジストリ を開きます。
prettier.service.expiration.timeout.msキーを見つけて、 値 フィールドのデフォルトのタイムアウトを変更します。
Prettier でコードを整形
エディターで、再フォーマットするコード断片を選択します。 ファイルまたはフォルダーを再フォーマットするには、 エクスプローラー ツールウィンドウ (Alt+1) でそれを選択します。
次に、コンテキストメニューから Prettier で整形 を選択します。
Prettier を設定して、特定のファイルが変更され保存されるたびに自動または手動で整形することができます。詳細は 保存時に Prettier を自動実行を参照してください。
また、Prettier を特定のファイルの デフォルトのフォーマッタとして設定することもできます。 Ctrl+Alt+L でコードを再フォーマットするたびに、このようなファイルに対して実行されます。
この動作は、 現在のプロジェクトだけでなく、 すべての新しいプロジェクトでも有効にできます。
保存時に Prettier を自動的に実行する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 保存時に実行 チェックボックスを選択します。
ファイルに対して実行 フィールドで、ファイルが保存されるたびに再フォーマットされるファイルのセットを定義するパターンを指定します。 デフォルトのパターンを受け入れるか、カスタムパターンを入力できます。
デフォルトのパターンでは、Prettier が起動し、更新および保存された JavaScript、TypeScript、JSX、TSX、HTML、Vue、Astro、 .ml 、CSS ファイルを処理します。 他の種類のファイルや特定のフォルダーに保存されているファイルを整形するには、 glob パターンを使ってデフォルトのパターンを更新してください。
例: sass ファイルと .scss ファイルも自動的に再フォーマットするには、次のようにしてデフォルトのパターンに
sass, scssを追加します。**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,ml,css,scss,sass}サブフォルダーを含む特定のフォルダーからファイルを再フォーマットするには、
**/*を<path to the folder>/**/*に置き換えます。次のような構造のプロジェクトがあるとします：
Prettier を src フォルダー内のファイルにのみ自動的に適用するには、次のようにパターンを更新します。
src/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,ml,css}その結果、ファイル dog.ts は保存時に再フォーマットされ、 animal.ts は変更されません。
貼り付け時にコードスニペットを再フォーマットする
デフォルトでは、新しく貼り付けたコードスニペットは自動的に Prettier にフォーマットされます。 この動作を無効にするには、以下の手順を実行してください。
設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 貼り付け時に実行 チェックボックスをオフにします。
Prettier をデフォルトのフォーマッターとして設定する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動します。
手動 Prettier 構成 を選択し、 「コードの整形」アクション時に実行 チェックボックスをオンにします。 Prettier 構成の詳細については、 Prettier パッケージと構成ファイルを検出する方法を選択するを参照してください。
ファイルに対して実行 フィールドで、常に Prettier で再フォーマットされるファイルのセットを定義するパターンを指定します。 デフォルトのパターンを受け入れるか、 Prettier のスコープを設定するに従ってそれをカスタマイズします。
新しいプロジェクトの保存時または再フォーマット時に実行するように Prettier を構成する
に進みます。 開いたダイアログで、 に移動します。
「コードの整形」アクション時に実行 および
On saveチェックボックスを使用して、Prettier をトリガーするアクションを指定します。必要に応じて、 保存時に Prettier を自動的に実行する説明に従って、 ファイルに対して実行 フィールドのデフォルトパターンを更新します。