Prettier

自動 Prettier 構成を有効にする

1. 設定 ダイアログ (Ctrl+Alt+S) を開き、 言語 & フレームワーク | JavaScript | Prettier に移動し、 自動 Prettier 構成​ を選択します。

   

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

3. 「ファイルに対して実行 」フィールドでは、ファイルが保存されるとき、または コードの整形​ アクションが呼び出されるときに、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 をデフォルトフォーマッターに設定を参照してください。

1. 設定 ダイアログ (Ctrl+Alt+S) を開き、 言語 & フレームワーク | JavaScript | Prettier に移動し、 手動 Prettier 構成​ を選択します。

2. Prettier パッケージ リストから、使用する prettier インストールを選択します。 標準のインストールプロシージャに従った場合、PhpStorm が prettier パッケージ自体を見つけて、フィールドが自動的に入力されます。

   

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

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

5. Prettier のスコープを設定します。

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

2. 「ファイルに対して実行 」フィールドでは、ファイルが保存されるとき、または コードの整形​ アクションが呼び出されるときに、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 をデフォルトフォーマッターに設定を参照してください。

3. 使用する .prettierignore ファイルを指定します。

   デフォルトでは、 上記で指定したパターンに一致する各ファイルについて、PhpStorm はフォルダーツリーの上方向に .prettierignore を検索し、最初に見つかったものを使います。 このデフォルトのアプローチは、 自動 Prettier 構成​ を選択している場合は常に適用されます。

   手動 Prettier 構成​ の場合、 .prettierignore へのパス フィールドにもデフォルトで Detect the .prettierignore file automatically が表示されます。 この提案を受け入れるか、 をクリックして、使用する .prettierignore を選択してください。

4. デフォルトでは、プロジェクトツリーの上位にある node_modules フォルダーに prettier パッケージが含まれているかどうかに関係なく、 上記で指定したパターンに一致するすべてのファイルに Prettier が自動適用されます。 これにより、各サブプロジェクトに prettier パッケージをインストールしなくても、すべてのサブプロジェクトで Prettier を使用できます。

   prettier パッケージがないサブプロジェクトのファイル処理を抑制するには、 手動 Prettier 構成​ を選択し、 Prettier 依存スコープ外のファイルに Prettier を適用する チェックボックスの選択を解除します。

• Prettier 言語サービスを再起動するには、 をクリックします。

• Prettier 構成ファイルを開いて編集するには、 をクリックします。

• PhpStorm での Prettier 構成を更新するには、 をクリックしてください。

• 不正な Node.js バージョン、無効な Prettier パッケージ、プラグインエラー、 言語サービスのタイムアウトなどのエラーが検出されると、 が表示されます。

  にマウスを移動すると、問題の説明を含むツールヒントが表示されます。

  

  をクリックして Prettier 構成設定を開きます。

カスタムタイムアウトを設定する

デフォルトのタイムアウトは 5 分です。

1. メインメニューの ツール | 内部アクション | レジストリ に移動するか、 Ctrl+Shift+A を使用して レジストリ を開きます。

2. prettier.service.expiration.timeout.ms キーを見つけて、 値 フィールドのデフォルトのタイムアウトを変更します。