{"id":36919,"date":"2018-02-07T15:36:33","date_gmt":"2018-02-07T22:36:33","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/aspnet\/?p=21636"},"modified":"2018-02-07T15:36:33","modified_gmt":"2018-02-07T22:36:33","slug":"file-nesting-in-solution-explorer","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/file-nesting-in-solution-explorer\/","title":{"rendered":"File nesting in Solution Explorer"},"content":{"rendered":"<p>We are excited to share with you a new capability in Visual Studio that was a clear ask from you, the community. Visual Studio has been nesting related files in Solution Explorer for a long time now, but <a href=\"https:\/\/github.com\/aspnet\/Tooling\/issues\/347\">not everybody agrees with the rules it uses<\/a>. That&#8217;s not a problem any more because Visual Studio now gives you** complete control over file nesting in Solution Exporer<strong>! We hope your continued feedback helps us evolve this capability into a fan favorite! <a href=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Solution-and-project-specific-settings.png\"><\/a><a href=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Demo-of-the-file-nesting-settings-called-Web.png\"><img decoding=\"async\" src=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Demo-of-the-file-nesting-settings-called-Web.png\" alt=\"\" width=\"360\" height=\"441\" class=\"alignnone size-full wp-image-11655\" srcset=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/Demo-of-the-file-nesting-settings-called-Web.png 360w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/Demo-of-the-file-nesting-settings-called-Web-245x300.png 245w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/a> Out of the box you get to pick between the presets\u00a0<\/strong>Off, Default <strong>and<\/strong> Web**, but you can always** customize it exactly to your liking.** You can even create solution-specific and project-specific settings, but more on all of that later.\u00a0First let&#8217;s go over what you get out of the box.<\/p>\n<h2>What you get out of the box<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/File-nesting-in-solution-explorer.png\" alt=\"\" width=\"451\" height=\"160\" class=\"alignnone size-full wp-image-11645\" srcset=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/File-nesting-in-solution-explorer.png 451w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/File-nesting-in-solution-explorer-300x106.png 300w\" sizes=\"(max-width: 451px) 100vw, 451px\" \/> <strong>Off:<\/strong>\u00a0This option gives you a flat list of files without any file nesting whatsoever. <strong>Default:<\/strong>\u00a0This options gives you the default file nesting behavior in Solution Explorer that Visual Studio has had since before you were able to control it. <strong>Web:<\/strong>\u00a0This option applies the &#8220;Web&#8221; file nesting behavior to all the projects in the current solution. It has a lot of rules and we encourage you to check it out and tell us what you think. The very first picture in this post is highlighting just a few good examples of the file nesting that you get with this option.<\/p>\n<h2>Customizing file nesting to your exact liking If you don&#8217;t like what you get out of the box,<\/h2>\n<p>** <strong>you can always create your own, **custom<\/strong> file nesting settings that make Solution Explorer nest files to your exact liking. You can add as many <strong>custom\u00a0file nesting settings<\/strong> as you like and you can switch between them as you see fit. Every time you want to create a new one you start by choosing to either start with an empty file or to use the <strong>Web<\/strong> settings as your starting point: <a href=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Add-custom-file-nesting-settings.png\"><img decoding=\"async\" src=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Add-custom-file-nesting-settings.png\" alt=\"\" width=\"387\" height=\"229\" class=\"alignnone wp-image-11635 size-full\" srcset=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/Add-custom-file-nesting-settings.png 387w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/Add-custom-file-nesting-settings-300x178.png 300w\" sizes=\"(max-width: 387px) 100vw, 387px\" \/><\/a> We recommend you use Web settings as your starting point because it\u2019s easier to tweak something that already works. If you do that you\u2019ll be starting off with something that looks like the following (instead of being empty): <img decoding=\"async\" src=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Edit-custom-file-nesting-settings.png\" alt=\"\" width=\"509\" height=\"305\" class=\"alignnone wp-image-11636 size-full\" srcset=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/Edit-custom-file-nesting-settings.png 509w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/Edit-custom-file-nesting-settings-300x180.png 300w\" sizes=\"(max-width: 509px) 100vw, 509px\" \/> Let\u2019s focus on the node <strong>dependentFileProvider<\/strong> and more specifically the children being added to it. Each child node is a type of rule that Visual Studio can use to nest files. For example, &#8220;having the same filename, but a different extension&#8221;\u00a0is one such type of rule. Let\u2019s go over each type of rule available to you: \n*   <strong>extentionToExtention:<\/strong> Use this type of rule to make <strong>file<\/strong>.js nest under <strong>file<\/strong>.ts\n*   <strong>fileSuffixToExtension:<\/strong> Use this type of rule to make <strong>file<\/strong>-vsdoc.js nest under <strong>file<\/strong>.js\n*   <strong>addedExtension: **Use this type of rule to make **file.html<\/strong>.css nest under <strong><em>file.html<\/em><\/strong>\n*   <strong>pathSegment:<\/strong> Use this type of rule to make <strong>jquery<\/strong>.min.<strong>js<\/strong> nest under <strong>jquery<\/strong>.<strong>js<\/strong>\n*   <strong>allExtensions:<\/strong> Use this type of rule to make <strong>file<\/strong>.* nest under <strong>file<\/strong>.js\n*   <strong>fileToFile:<\/strong> Use this type of rule to make <strong>bower.json<\/strong> nest under <strong>.bowerrc<\/strong><\/p>\n<p><strong>Ordering is very important in every part of your custom settings file.<\/strong> You can change the order in which rules are executed by moving them up or down inside of the dependentFileProvider node.\u00a0 For example, if you have one rule that makes <strong>file.js the parent of file.ts<\/strong> and another rule that makes <strong>file.coffee the parent of file.ts<\/strong> the order in which they appear in the file decides what happens when all three files are present at the same time: file.js, file.ts and file.coffee. Since file.ts can only have one parent, whichever rule executes first wins. You can manage all settings, including your own custom settings through the same button in Solution Explorer: <a href=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Activate-custom-file-nesting-settings.png\"><img decoding=\"async\" src=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Activate-custom-file-nesting-settings.png\" alt=\"\" width=\"447\" height=\"197\" class=\"alignnone wp-image-11625 size-full\" srcset=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/Activate-custom-file-nesting-settings.png 447w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2018\/02\/Activate-custom-file-nesting-settings-300x132.png 300w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/a><a href=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Edit-custom-file-nesting-settings.png\"><\/a> Head over to our docs for more details on <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/ide\/file-nesting-solution-explorer\">how to customize file nesting in Solution Explorer with examples<\/a>.<\/p>\n<h2>Creating solution-specific and project-specific settings You can create solution-specific and project-specific settings through the context menu of each solution and project:<\/h2>\n<p><a href=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Solution-and-project-specific-settings.png\"><img decoding=\"async\" src=\"https:\/\/msdnshared.blob.core.windows.net\/media\/2018\/02\/Solution-and-project-specific-settings.png\" alt=\"\" width=\"818\" height=\"658\" class=\"alignnone size-full wp-image-11735\" \/><\/a> \u00a0 Solution-specific and project-specific settings will be <strong>combined<\/strong> with whatever Visual Studio settings are already active. Don\u2019t be surprised for example if you have a blank project-specific settings file, yet Solution Explorer is still nesting files. The nesting is either coming from the solution-specific settings or the Visual Studio settings.\u00a0The process of merging file nesting settings goes: Project &gt; Solution &gt; Visual Studio. You can tell Visual Studio to ignore solution-specific and project-specific settings, even if the files exist on disk, by enabling the option <strong>Ignore solution and project settings<\/strong> under <strong>Tools | Options | ASP.NET Core | File Nesting<\/strong>. You can do the opposite and tell Visual Studio to <strong>only use<\/strong> the solution-specific or the project-specific settings. Remember that \u201croot\u201d node we saw earlier in our custom settings? If not, go back and take a look at the picture. If you set that node to <strong>true<\/strong> it tells Visual Studio to stop merging files\u00a0at that level and not combine it with files higher up the hierarchy. The great thing about\u00a0solution-specific and project-specific settings is that they can be checked into source control and the entire team that works on the repo can share them.<\/p>\n<h2>Next steps Download<\/h2>\n<p><a href=\"https:\/\/www.visualstudio.com\/vs\/\">Visual Studio 2017<\/a> and try file nesting in Solution Explorer. The feature is currently only supported by ASP.NET Core projects, but tell us that you want it for other projects as well and we will try to make it happen.\u00a0Check out our docs for more details on <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/ide\/file-nesting-solution-explorer\">how to customize file nesting in Solution Explorer with examples<\/a>. Please ask us questions and give us your feedback any way you find most convenient. You can leave a comment on this blog post, you can <a href=\"https:\/\/visualstudio.uservoice.com\/forums\/121579-visual-studio-ide?query=file%20nesting\">submit your suggestions on UserVoice<\/a> or you can drop us an email on <a href=\"mailto:Anton.Piskunov@microsoft.com\">Anton.Piskunovmicrosoft.com<\/a> (Principal Engineer) and <a href=\"mailto:Angelos.Petropoulos@microsoft.com\">Angelos.Petropoulosmicrosoft.com<\/a> (Product Manager).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are excited to share with you a new capability in Visual Studio that was a clear ask from you, the community. Visual Studio has been nesting related files in Solution Explorer for a long time now, but not everybody agrees with the rules it uses. That&#8217;s not a problem any more because Visual Studio [&hellip;]<\/p>\n","protected":false},"author":127,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[],"class_list":["post-36919","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet"],"acf":[],"blog_post_summary":"<p>We are excited to share with you a new capability in Visual Studio that was a clear ask from you, the community. Visual Studio has been nesting related files in Solution Explorer for a long time now, but not everybody agrees with the rules it uses. That&#8217;s not a problem any more because Visual Studio [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/36919","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/127"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=36919"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/36919\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=36919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=36919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=36919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}