Visual Studio を使っていると、一部のファイルがネスト表示されることに気づくと思います。
物理フォルダを見ると、これらのファイルはフラットに配置されていることがわかります。
Visual Studio のソリューションエクスプローラー上の表示がネスト表示されているだけなんですよね。 このネスト表示、既存のファイルを読み込んだりすると、壊れてしまうことって結構あります。 壊れてしまうと、プロジェクトファイルを手修正する必要があって、すごくめんどくさいなーとか思ったことありませんか？
あと ASP.NET Web アプリケーションプロジェクトを作っていると、 JavaScript ファイルや CSS ファイルがダラーっとフラットに並んでしまってうざったい。 そういう時に使える拡張機能を紹介したいと思います。
前提条件
- Visual Studio 2019
- .NET Framework 4.8
File Nesting を使う
この拡張機能を使ってみてください。 marketplace.visualstudio.com
上記のサイトから拡張機能のパッケージをダウンロードしてインストールします。 拡張機能をインストールする際、 Visual Studio は終了しておく必要があるので注意して下さい。
簡単な使い方
前回解説した記事内で、App.configとApp.Release.configを作りました。 これをWeb.configと同様に、ネスト表示してみたいと思います。
階層を掘りたい方のファイルを右クリックします。 今回の例だと App.config の下に App.Release.config を配置したいので、 App.Release.config を右クリックします。 コンテキストメニューから [File Nesting] → [Nest item] を選択します。
[File Nesting] ダイアログが表示されます。 そこで、このファイルの親ファイルを [Select parent] のドロップダウンから選択して [OK] ボタンを押下します。 今回は App.Release.config の親を App.config にしたいので、App.config を選択しています。
これでファイルがネスト表示できるようになりました。
使いどころ
私が特によく使うのは、 JavaScript や CSS のファイル群です。 ASP.NET MVC 5 のプロジェクトテンプレートを使うと、 JavaScript や CSS ファイルがすべてフラットに並んでしまいます。
ここにこの拡張機能を用いて適切にネスト表示させてあげることで、ソリューションエクスプローラー上のすっきり度が大きく向上します。
全部開くとこんな感じになります。
