Prettier
Prettier (英語) は、 TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。 IntelliJ IDEA では、 Prettier で整形 アクションを使用して、ファイルまたはディレクトリ全体だけでなく、選択したコードフラグメントもフォーマットできます。 IntelliJ IDEA は、プロジェクト内の依存関係として、またはコンピューター上にグローバルに Prettier をインストールするとすぐに、このアクションを追加します。
特定のファイルが変更されるたびに再フォーマットし、変更が自動または手動で保存されるように Prettier を設定できます。 保存時に Prettier を自動的に実行するを参照してください。
また、Prettier を特定のファイルの デフォルトのフォーマッタとして設定することもできます。 Ctrl+Alt+L でコードを再フォーマットするたびに、このようなファイルに対して実行されます。
詳細については、 Prettier でコードを整形 を参照してください。
始める前に
Prettier をインストールする
埋め込まれた ターミナル (Alt+F12) を開きます。
次のいずれかのコマンドを入力します。
npm install --save-dev --save-exact prettiernpm install --global prettier
Prettier オフィシャル Web サイト(英語)のインストールモードの詳細を参照してください。
IntelliJ IDEA で Prettier を構成する
IntelliJ IDEA は、 上記のようにインストールするとすぐに Prettier を有効にし、 Prettier で整形 アクションを追加します。 Prettier をオフにするには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 言語 & フレームワーク | JavaScript | Prettier に移動して、 Prettier を無効にする を選択します。
サポートされている設定ファイルの形式
IntelliJ IDEA は、次のファイルタイプで 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 構成
このモードでは、 ファイル実行パターンに一致するファイルごとに次の処理が行われます。
IntelliJ IDEA は、再フォーマットするファイルと同じフォルダーまたはその親フォルダーのいずれかにある最も近い node_modules フォルダーの Prettier パッケージを使用します。
IntelliJ IDEA は最も近い 構成ファイルを自動的に検出し、そこから設定を適用します。
IntelliJ IDEA はフォルダーツリーの上方向に .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 の依存関係としてリストされており、プロジェクトに少なくとも 1 つの Prettier 構成ファイルがある場合、 .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インストールを選択します。 標準のインストール手順に従った場合、IntelliJ IDEA は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 ファイル(英語)を指定します。
デフォルトでは、 上記パターン IntelliJ IDEA に一致するファイルごとに、フォルダーツリーを上方向に .prettierignore を検索し、最初に見つかったものを使用します。 このデフォルトのアプローチは、 自動 Prettier 構成を選択した場合に常に適用されます。
手動 Prettier 構成の場合、 .prettierignore へのパス フィールドにもデフォルトで
.prettierignore ファイルを自動検出が表示されます。 この提案を受け入れるか、
をクリックして使用する .prettierignore を選択します。デフォルトでは、プロジェクトツリーの上位にある node_modules フォルダーに
prettierパッケージが含まれているかどうかに関係なく、 上記パターンに一致するすべてのファイルに Prettier が自動的に適用されます。 これにより、各サブプロジェクトにprettierパッケージをインストールしなくても、すべてのサブプロジェクトで Prettier を使用できます。prettierパッケージのないサブプロジェクトからのファイルの処理を抑制するには、 手動 Prettier 構成 を選択し、 prettier 依存スコープ外のファイルに Prettier を適用する チェックボックスをオフにします。
Prettier 言語の状況 ウィジェット},{
設定済みのスコープ に従って Prettier で処理されるファイルを開くと、ステータスバーに Prettier ウィジェット アイコン 
が表示されます。},{
このウィジェットから、Prettier 言語サービスの再起動、Prettier 構成ファイルの編集、または Prettier 設定を開いて構成を更新できます。
Prettier 言語サービスを再起動するには、
をクリックします。},{Prettier 構成ファイルを開いて編集するには、
をクリックします。},{IntelliJ IDEA の 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 を構成する
に移動します。 開いたダイアログで、 に移動します。
'コードの整形' アクション時に実行 および
保存時チェックボックスを使用して、Prettier をトリガーするアクションを指定します。必要に応じて、 保存時に Prettier を自動的に実行する説明に従って、 ファイルに対して実行 フィールドのデフォルトパターンを更新します。