WebStorm 2026.1 Help

ファイルのネスト規則

同じ名前だが接尾辞が異なるファイルの表示を設定できます。 このようなファイルの束は、プレーンな構造として表示することも、親ファイルを子ファイルを含むフォルダー (ネスト) として表示することもできます。

このようなファイルの束は、たとえば Angular(英語) を使用している場合、フレームワーク固有のプロジェクトに表示されることがあります。

ネスティングルールオフ
入れ子規則

また、生成されたソースマップを使用して TypeScript を JavaScript にコンパイルすることも検討してください。

コンパイルされた JavaScript ファイルと生成されたソースマップファイルを含む Typescript ファイルは、プレーンな構造として表示されます。
コンパイルされた JavaScript ファイルと生成されたソースマップファイルを含む Typescript ファイルがネストされて表示されます

ファイルのネストを調整する

  1. プロジェクト ツールウィンドウ (Alt+1) で、 をクリックして 外観 を選択し、次に ファイルのネスト… を選択します。

    オープンファイルネストダイアログ

    ファイルのネストルールを構成できるダイアログが開きます。

  2. リストのパターンに基づいて子ファイルを認識し、対応する親にグループ化して表示するには、 同じ名前のファイルをネストとして表示する オプションを有効にします。

    それ以外の場合、WebStorm は親と子を同じレベルで表示します。

  3. ネストルールを構成します。 既定のルールを編集するか、新規ルールを指定できます。 追加ボタン をクリックし、親ファイルと子ファイルのサフィックスを指定してください。

    ルールを構成するときは、次の点を考慮してください:

    • 複数レベルのネストには対応していません。 例: TypeScript ファイル file.ts file.js にコンパイルされ、 file.js.map が生成された場合、 file.js file.js.map の両方が file.ts のすぐ下に表示されます。

    • ワイルドカードは推奨されません。

  4. OK をクリックしてください。

2026 年 6 月 8 日