Grouping files in Solution Explorer

A nice feature of Visual Studio Web Essentials is that it can process your file right after you saved it. For example it can compile your TypeScript file to JavaScript, and even create the map file for it. Or it can generate the CSS from your LESS file including the minified version.

This feature is really useful, if this kind of transformation is not part of your build process, and in this case it is very logical that the generated files are added to the project file. Unfortunately Visual Studio does not always recognize the connection between these files, and does not group them in the Solution Explorer window. If you are brave enough, you can edit the .csproj file and force the Solution Explorer window to show the connecting files in a nested hierarchy. The trick is the DependentUpon element, for example this code:

<TypeScriptCompile Include="js\Main.ts" />
<Content Include="js\Main.js">
<Content Include="js\">

results this:


You can even create a deeper hierarchy:

<None Include="css\default.less" /> 
<Content Include="css\default.css"> 
<Content Include="css\default.min.css"> 

The above code results this display in the Solution Explorer:




One thought on “Grouping files in Solution Explorer

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s