ファイルのネスト規則
同じ名前だが接尾辞が異なるファイルの表示を設定できます。 このようなファイルの束は、プレーンな構造として表示することも、親ファイルを子ファイルを含むフォルダー (ネスト) として表示することもできます。
このようなファイルの束は、たとえば Angular(英語) を使用している場合、フレームワーク固有のプロジェクトに表示されることがあります。


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


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

ファイルのネストルールを構成できるダイアログが開きます。
リストのパターンに基づいて子ファイルを認識し、対応する親にグループ化して表示するには、 同じ名前のファイルをネストとして表示する オプションを有効にします。
それ以外の場合、WebStorm は親と子を同じレベルで表示します。
ネストルールを構成します。 既定のルールを編集するか、新規ルールを指定できます。
をクリックし、親ファイルと子ファイルのサフィックスを指定してください。
ルールを構成するときは、次の点を考慮してください:
複数レベルのネストには対応していません。 例: TypeScript ファイル file.ts が file.js にコンパイルされ、 file.js.map が生成された場合、 file.js と file.js.map の両方が file.ts のすぐ下に表示されます。
ワイルドカードは推奨されません。
OK をクリックしてください。