ソリューション エクスプローラーでのファイルの入れ子

ソリューション エクスプローラーでは、関連ファイルを入れ子にして、それらを整理し、見つけやすくしています。 たとえば、Windows フォーム フォームをプロジェクトに追加すると、フォームのコード ファイルは ソリューション エクスプローラーのフォームの下に入れ子になります。 .NET Core (および .NET 5 以降) プロジェクトでは、ファイルの入れ子をさらに一歩進めることができます。 ファイルの入れ子のプリセット (OffDefaultWeb) から選択できます。 また、ファイルの入れ子の方法をカスタマイズしたり、ソリューション固有およびプロジェクト固有の設定を作成したりすることもできます。

Visual Studio 2022 バージョン 17.2 以前では、この機能は ASP.NET Core プロジェクトでのみサポートされていました。 バージョン 17.3 以降では、.NET を対象とするすべてのプロジェクトでファイルの入れ子がサポートされています。

ファイルの入れ子オプション

ファイルの入れ子のオンとオフを切り替えるボタンを示すスクリーンショット。

ファイルの入れ子のオン/オフを切り替えるボタン

カスタマイズされていないファイルの入れ子に使用できるオプションは次のとおりです。

  • オフ: このオプションを選択すると、入れ子にすることなくファイルのフラット リストが表示されます。

  • 既定値: このオプションでは、 ソリューション エクスプローラーでの既定のファイル入れ子動作が提供されます。 特定のプロジェクトの種類の設定が存在しない場合、プロジェクト内のファイルは入れ子になっていません。 設定が存在する場合 (Web プロジェクトなど)、入れ子が適用されます。

  • Web: このオプションは、 現在 のソリューション内のすべてのプロジェクトに Web ファイルの入れ子動作を適用します。 多くのルールがあるので、是非ご確認いただき、ご意見をお聞かせください。 次のスクリーンショットでは、このオプションで取得するファイルの入れ子動作の例をいくつか示しています。

    ソリューション エクスプローラー でのファイルの入れ子を示すスクリーンショット。

    ソリューション エクスプローラーでのファイルの入れ子

ファイルの入れ子をカスタマイズする

既存の設定に満足できない場合は、独自のカスタムファイル入れ子設定を作成して、ソリューション エクスプローラー にファイルを入れ子にする方法を指示できます。 必要な数のカスタム ファイル入れ子設定を追加でき、必要に応じて切り替えることができます。 新しいカスタム設定を作成するには、空のファイルから開始するか、 既定 の設定を開始点として使用できます。

[カスタム ファイルの入れ子設定の追加] ダイアログを示すスクリーンショット。

既定 設定を出発点として使用することをお勧めします。これは、既に機能するものを操作する方が簡単であるためです。 既定の設定を開始点として使用する場合、.filenesting.json ファイルは次のファイルのようになります。

既存の設定に満足できない場合は、独自のカスタムファイル入れ子設定を作成して、ソリューション エクスプローラー にファイルを入れ子にする方法を指示できます。 必要な数のカスタム ファイル入れ子設定を追加でき、必要に応じて切り替えることができます。 新しいカスタム設定を作成するには、空のファイルから開始するか、 Web 設定を開始点として使用します。

カスタム ファイルの入れ子規則を追加する

Web 設定を 出発点として使用することをお勧めします。これは、既に機能するものを操作する方が簡単であるためです。 Web 設定を開始点として使用する場合、.filenesting.json ファイルは次のファイルのようになります。

スクリーンショットは、カスタム設定ファイル内のネストされたルールプロバイダーを示しています。

カスタム設定の基礎として既存のファイル入れ子規則を使用する

ノード 依存FileProviders とその子ノードに焦点を当ててみましょう。 各子ノードは、Visual Studio がファイルの入れ子に使用できるルールの一種です。 たとえば、 同じファイル名を持ちますが、拡張子が異なる のは 1 種類のルールです。 使用可能なルールは次のとおりです。

  • extensionToExtension: file.jsfile.ts の下に入れ子にするには、この規則の種類を使います

  • fileSuffixToExtension: file-vsdoc.jsfile.js の下に入れ子にするには、この規則の種類を使います

  • addedExtension: file.html.cssfile.html の下に入れ子にするには、この規則の種類を使います

  • pathSegment: jquery.min.jsjquery.js の下に入れ子にするには、この規則の種類を使います

  • allExtensions: file.*file.js の下に入れ子にするには、この規則の種類を使います

  • fileToFile: bower.json.bowerrc の下に入れ子にするには、この規則の種類を使います

extensionToExtension プロバイダー

このプロバイダーを使用すると、特定のファイル拡張子を使用してファイルの入れ子の規則を定義できます。 次の例を確認してください。

extentionToExtension ルールを示すスクリーンショット。

extensionToExtension ルールの効果を示すスクリーンショット。

extentionToExtension の規則の例

extentionToExtension の効果の例

  • file.js は、最初の extensionToExtension ルールにより、file.ts の下に入れ子になっています。

  • file.jsfile.tsx の下で入れ子になりません。これは、規則で .ts.tsx よりも先に定義されており、親が 1 つしか存在できないためです。

  • 2 つ目の extensionToExtension 規則により、light.csslight.sass の下に入れ子になっています。

  • home.html は、3 番目の extensionToExtension ルールのために home.md の下に入れ子になっています。

fileSuffixToExtension プロバイダー

このプロバイダーは extensionToExtension プロバイダーと同じように機能しますが、唯一の違いは、ルールが拡張子ではなくファイルのサフィックスを見ることです。 次の例を確認してください。

fileSuffixToExtension ルールを示すスクリーンショット。

fileSuffixToExtension ルールの効果を示すスクリーンショット。

fileSuffixToExtension の規則の例

fileSuffixToExtension の効果の例

  • `portal-vsdoc.js は、portal.js の下に、fileSuffixToExtension ルールのために入れ子になっています。`

  • ルールの他のすべての側面は 、extensionToExtension と同じように動作します。

addedExtension プロバイダー

このプロバイダーは、追加の拡張子を持つファイルを、追加の拡張子を持たないファイルの下に入れ子にします。 追加の拡張子は、完全なファイル名の末尾にのみ表示できます。

次の例を確認してください。

addedextension ルールを示すスクリーンショット。

addedextension ルールの効果を示すスクリーンショット。

addedExtension ルールの例

addedExtension 効果の例

  • file.html.cssfile.html の下に、addedExtension ルールに基づき配置されています。

addedExtension規則にはファイル拡張子を指定しません。すべてのファイル拡張子に自動的に適用されます。 つまり、別のファイルと同じ名前と拡張子を持ち、末尾に追加の拡張子を持つファイルは、他のファイルの下に入れ子になります。 このプロバイダーの効果を特定のファイル拡張子だけに制限することはできません。

pathSegment プロバイダー

このプロバイダーは、追加の拡張子を持つファイルを、追加の拡張子を持たないファイルの下に入れ子にします。 追加の拡張子は、完全なファイル名の中央にのみ表示できます。

次の例を確認してください。

pathSegment ルールを示すスクリーンショット。

pathSegment ルールの効果を示すスクリーンショット。

pathSegment ルールの例

pathSegment の効果の例

  • pathSegment 規則により、jquery.min.jsjquery.js の下に入れ子になっています。

  • pathSegment規則に特定のファイル拡張子を指定しない場合は、すべてのファイル拡張子に適用されます。 つまり、別のファイルと同じ名前と拡張子を持ち、その間に追加の拡張子があるファイルは、その別のファイルに入れ子にされます。

  • pathSegmentルールの効果を特定のファイル拡張子に制限するには、次のように指定します。

    "pathSegment": {
        "add": {
          ".*": [
            ".js",
            ".css",
            ".html",
            ".htm"
          ]
        }
    }
    

allExtensions プロバイダー

このプロバイダーを使用すると、拡張子が同じ基本ファイル名を持つファイルのファイル入れ子規則を定義できます。 次の例を確認してください。

allExtensions ルールを示すスクリーンショット。

allExtensions ルールの効果を示すスクリーンショット。

allExtensions ルールの例

allExtensions の効果の例

  • allExtensions ルールのため、Template.csTemplate.docは Template.tt の下に入れ子になります。

fileToFile プロバイダー

このプロバイダーを使用すると、ファイル名全体に基づいてファイルの入れ子の規則を定義できます。 次の例を確認してください。

fileToFile ルールを示すスクリーンショット。

fileToFile ルールの効果を示すスクリーンショット。

fileToFile ルールの例

fileToFile の効果の例

  • fileToFile 規則により、file.npmrcpackage.json の下に入れ子になっています。

ルールの順序

順序付けは、カスタム設定ファイルのすべての部分で重要です。 依存FileProvider ノード内でルールを上下に移動することで、ルールの実行順序を変更できます。 たとえば、file.jsfile.tsの親にするルールと、file.coffeefile.tsの親にする別のルールがある場合、3つのファイルがすべて存在する時、ファイル内でのそれらの規則の表示順序によって入れ子の動作が決まります。 file.tsは親を1つしか持つことができないので、最初に実行されるルールが優先されます。

順序付けは、セクション内のファイルだけでなく、ルール セクション自体にも重要です。 ファイルのペアがファイル入れ子の規則と一致するとすぐに、ファイル内のさらに下にある他の規則は無視され、次のファイルペアが処理されます。

ファイル入れ子ボタン

ソリューション エクスプローラーの同じボタンを使用して、独自のカスタム設定を含むすべての設定を管理できます。

カスタム ファイルの入れ子ルールをアクティブ化するためのメニュー項目を示すスクリーンショット。

カスタム ファイルの入れ子ルールをアクティブ化する

プロジェクト固有の設定を作成する

ソリューション固有の設定とプロジェクト固有の設定を作成するには、ソリューションルートまたはプロジェクトルートフォルダに .filenesting.json ファイルを追加します。

ソリューション固有およびプロジェクト固有の設定は、各ソリューションとプロジェクトの右クリック メニュー (コンテキスト メニュー) を使用して作成できます。

ソリューションとプロジェクト固有の入れ子ルール

ソリューション固有の設定とプロジェクト固有の設定は、アクティブな Visual Studio 設定と組み合わされます。 たとえば、空のプロジェクト固有の設定ファイルがあっても、ソリューション エクスプローラー は依然としてファイルをネストしています。 入れ子の動作は、ソリューション固有の設定または Visual Studio の設定から取得されます。 ファイルの入れ子の設定をマージする場合の優先順位は、Visual Studio > Solution > Project です。

ルート ノードを true に設定することで、ソリューション固有またはプロジェクト固有の設定のみを使用するように Visual Studio に指示できます。 Visual Studio は、そのレベルでファイルのマージを停止し、階層の上位のファイルと結合しません。

ソリューション固有の設定とプロジェクト固有の設定をソース管理にチェックインでき、コードベースで作業するチーム全体で共有できます。

プロジェクトのファイル入れ子規則を無効にする

特定のソリューションまたはプロジェクトの既存のグローバル ファイル入れ子規則を無効にするには、プロバイダーに対して追加ではなく削除アクションを使用します。 たとえば、次の設定コードをプロジェクトに追加すると、この特定のプロジェクトに対してグローバルに存在する可能性がある すべての pathSegment ルールが無効になります。

"dependentFileProviders": {
  "remove": {
    "pathSegment": {}
  }
}