RubyMine 2025.1 ヘルプ

Prettier

Prettier (英語) は、 TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。RubyMine では、Prettier で整形アクションを使用して、ファイルまたはディレクトリ全体だけでなく、選択したコードフラグメントもフォーマットできます。RubyMine は、プロジェクト内の依存関係として、またはコンピューター上にグローバルに Prettier をインストールするとすぐに、このアクションを追加します。

特定のファイルが変更されるたびに再フォーマットし、変更が自動または手動で保存されるように Prettier を設定できます。保存時に Prettier を自動的に実行するを参照してください。

また、Prettier を特定のファイルのデフォルトのフォーマッタとして設定することもできます。Ctrl+Alt+L でコードを再フォーマットするたびに、このようなファイルに対して実行されます。

詳細は、Prettier でコードを整形を参照してください。

始める前に

  1. Node.js をダウンロードしてインストールします。

  2. プロジェクトでローカル Node.js インタープリターが設定されていることを確認します。設定ダイアログ (Ctrl+Alt+S) を開き、言語 & フレームワーク | Node.js に移動します。Node インタープリターフィールドには、デフォルトのプロジェクト Node.js インタープリターが表示されます。詳細については、ローカル Node.js インタープリターの構成を参照してください。

  3. 設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Prettier に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。

Prettier をインストールする

  1. 埋め込まれたターミナル (Alt+F12) を開きます。

  2. 次のいずれかのコマンドを入力します。

    • npm install --save-dev --save-exact prettier

    • npm install --global prettier

Prettier オフィシャル Web サイト(英語)のインストールモードの詳細を参照してください。

RubyMine で Prettier を構成する

RubyMine は、上記のようにインストールするとすぐに Prettier を有効にし、Prettier で整形アクションを追加します。Prettier をオフにするには、設定ダイアログ (Ctrl+Alt+S) を開き、言語 & フレームワーク | JavaScript | Prettier に移動して、Prettier を無効にするを選択します。

自動 Prettier 構成

このモードでは、ファイル実行パターンに一致するファイルごとに次の処理が行われます。

  • RubyMine は、再フォーマットするファイルと同じフォルダーまたはその親フォルダーのいずれかにある最も近い node_modules フォルダーの Prettier パッケージを使用します。

  • RubyMine は最も近い .prettierrc.* 構成ファイルを自動的に検出し、そこから設定を適用します。

  • RubyMine はフォルダーツリーの上方向に .prettierignore ファイルを検索し、見つかった最初のファイルの設定を使用します (存在する場合)。

自動 Prettier 構成では、Prettier は、対応する package.json にリストされている Prettier 依存関係の範囲内のファイルにのみ適用されます。この動作を変更するには、手動 Prettier 構成を選択し、prettier 依存スコープ外のファイルに Prettier を適用するチェックボックスをオンにします。詳細については、手動 Prettier 構成を参照してください。

プロジェクトが次のように構成されているとします。

Project structure: Prettier is applied to files within the scope of Prettier dependency

プロジェクトには、プロジェクトルートに .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 構成を有効にする

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

    Configure Prettier automatically

  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>/**/* に置き換えます。

      次のような構造のプロジェクトがあるとします。

      Prettier: custom patterns. Example project structure

      coffee フォルダー内のファイルのみを再フォーマットするには、次のようにパターンを更新します。

      coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}

      その結果、ファイル reformat.coffee は再フォーマットされますが、no_reformatting.coffee は再フォーマットされません。

    詳細については、保存時に Prettier を自動的に実行するおよび Prettier をデフォルトのフォーマッターとして設定するを参照してください。

手動 Prettier 構成

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

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

    Configure Prettier: manual mode

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

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

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

Prettier のスコープを設定する

Prettier によって自動的に処理されるファイルを定義するファイル名パターンを指定できます。また、.prettierignore ファイルにファイルを追加して、一部のファイルを処理から除外することもできます。

デフォルトでは、Prettier は 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>/**/* に置き換えます。

      次のような構造のプロジェクトがあるとします。

      Prettier: custom patterns. Example project structure

      coffee フォルダー内のファイルのみを再フォーマットするには、次のようにパターンを更新します。

      coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}

      その結果、ファイル reformat.coffee は再フォーマットされますが、no_reformatting.coffee は再フォーマットされません。

    詳細については、保存時に Prettier を自動的に実行するおよび Prettier をデフォルトのフォーマッターとして設定するを参照してください。

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

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

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

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

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

Prettier でコードを整形

  1. エディターで、再フォーマットするコードフラグメントを選択します。ファイルまたはフォルダーを再フォーマットするには、プロジェクトツールウィンドウ Alt+1 で選択します。

  2. 次に、コンテキストメニューから Prettier で整形を選択します。

特定のファイルが変更されるたびに再フォーマットし、変更が自動または手動で保存されるように Prettier を設定できます。保存時に Prettier を自動的に実行するを参照してください。

また、Prettier を特定のファイルのデフォルトのフォーマッタとして設定することもできます。Ctrl+Alt+L でコードを再フォーマットするたびに、このようなファイルに対して実行されます。

この動作は、現在のプロジェクトだけでなく、すべての新しいプロジェクトでも有効にできます。

保存時に Prettier を自動的に実行する

  1. 設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | Prettier に移動して、保存時に実行チェックボックスを選択します。

  2. ファイルに対して実行フィールドで、ファイルが保存されるたびに再フォーマットされるファイルのセットを定義するパターンを指定します。デフォルトのパターンを受け入れるか、カスタムパターンを入力できます。

    デフォルトのパターンでは、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: custom patterns. Example project structure

      Prettier を src フォルダー内のファイルにのみ自動的に適用するには、次のようにパターンを更新します。

      src/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,ml,css}

      その結果、ファイル dog.ts は保存時に再フォーマットされ、animal.ts は変更されません。

Prettier をデフォルトのフォーマッターとして設定する

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

  2. 手動 Prettier 構成を選択し、'コードの整形' アクション時に実行チェックボックスをオンにします。Prettier 構成の詳細については、Prettier パッケージと構成ファイルを検出する方法を選択するを参照してください。

  3. ファイルに対して実行フィールドで、常に Prettier で再フォーマットされるファイルのセットを定義するパターンを指定します。デフォルトのパターンを受け入れるか、Prettier のスコープを設定するに従ってそれをカスタマイズします。

新しいプロジェクトの保存時または再フォーマット時に実行するように Prettier を構成する

  1. ファイル | 新規プロジェクトのセットアップ | 新規プロジェクトの設定に進みます。開いたダイアログで、言語 & フレームワーク | JavaScript | Prettier に移動します。

  2. 'コードの整形' アクション時に実行および On save チェックボックスを使用して、Prettier をトリガーするアクションを指定します。

  3. 必要に応じて、保存時に Prettier を自動的に実行する説明に従って、ファイルに対して実行フィールドのデフォルトパターンを更新します。

PhoneGap と Cordova React

関連ページ：

Node.js

Node.js は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。RubyMine は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストール...

プラグインのインストール

プラグインは RubyMine のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...

PhoneGap と Cordova

PhoneGap と Apache Cordova は、単一の HTML、CSS、Javascript/Typescript コードベースを使用してモバイルアプリケーションを開発し、Android を含むさまざまなモバイルプラットフォームをターゲットにするためのフレームワークです。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレ...

React

React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。RubyMine は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインストール済みタブ...