Prettier
Prettier (英語) は、 TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。 WebStorm では、 Prettier で整形 アクションを使って、選択したコードフラグメントだけでなく、ファイルやディレクトリ全体もフォーマットできます。 WebStorm は、プロジェクトの依存関係やコンピューター全体に Prettier をインストールするとすぐに、このアクションを追加します。
Prettier を構成して、特定のファイルが変更されて保存されるたびに自動または手動で整形できるようにできます。詳細は 保存時に Prettier を自動で実行 を参照してください。
また、Prettier を特定のファイルの デフォルトのフォーマッタとして設定することもできます。 Ctrl+Alt+L でコードを再フォーマットするたびに、このようなファイルに対して実行されます。
詳細は、 Prettier でコードを整形 を参照してください。
始める前に
コンピューターに Node.js(英語) があることを確認してください。
設定で Prettier プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに Prettier と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。
Prettier をインストールする
埋め込まれた ターミナル (Alt+F12) を開きます。
次のいずれかのコマンドを入力してください：
npm install --save-dev --save-exact prettiernpm install --global prettier
Prettier オフィシャル Web サイト(英語)のインストールモードの詳細を参照してください。
WebStorm で Prettier を構成する
WebStorm は、インストールするとすぐに Prettier を有効にし、 Prettier で整形 アクションを 上記のように追加します。 Prettier をオフにするには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 言語 & フレームワーク | JavaScript | Prettier に移動して、 Prettier を無効にする を選択します。
サポートされている設定ファイルの形式
WebStorm は、次のファイルタイプで 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 構成
このモードでは、 ファイル実行パターンに一致するファイルごとに次の処理が行われます。
WebStorm は、再フォーマットするファイルと同じフォルダーまたはその親フォルダーのいずれかにある最も近い node_modules フォルダーの Prettier パッケージを使用します。
WebStorm は最も近い 構成ファイルを自動的に検出し、そこから設定を適用します。
WebStorm はフォルダーツリーの上方向に .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 構成 は、Prettier がいずれかの package.json に依存関係としてリストされ、プロジェクトに少なくとも1つの Prettier 構成ファイルがある場合、 .idea フォルダーのない新しいプロジェクトでデフォルトで有効になります。
その結果、プロジェクトが異なる 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インストールを選択します。 標準のインストール手順に従った場合、WebStorm は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 ファイルを指定します。
上記パターンに一致する各ファイルに対して、WebStorm はデフォルトでフォルダーツリーを上方向に .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 構成ファイルを開いて編集するには、
をクリックします。WebStorm の Prettier 構成を更新するには、
をクリックします。不正な Node.js バージョン、無効な Prettier パッケージ、プラグインエラー、 言語サービスのタイムアウトなどのエラーが検出されると、
が表示されます。 にマウスを移動すると、問題の説明を含むツールヒントが表示されます。
をクリックして Prettier 構成設定を開きます。
システムリソースの無駄を避けるため、Prettier 言語サーバーは一定時間操作が行われないとタイムアウトで自動的に停止します。 Prettier は、コードのフォーマットや設定の解決（たとえば、コードスタイルの変更）のために呼び出された時点でアクティブとみなされます。
カスタムタイムアウトを設定する
デフォルトのタイムアウトは 5 分です。
メインメニューの に移動するか、 Ctrl+Shift+A を使用して レジストリ を開きます。
prettier.service.expiration.timeout.msキーを見つけて、 値 フィールドのデフォルトのタイムアウトを変更します。
Prettier でコードを整形
エディターで、再フォーマットするコード断片を選択します。 ファイルまたはフォルダーを再フォーマットするには、 プロジェクト ツールウィンドウ (Alt+1) でそれを選択します。
次に、 Ctrl+Alt+Shift+P を押すか、コンテキストメニューから 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 を自動的に実行する説明に従って、 ファイルに対して実行 フィールドのデフォルトパターンを更新します。