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