{"id":36887,"date":"2017-03-21T09:05:25","date_gmt":"2017-03-21T16:05:25","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/?p=9485"},"modified":"2021-11-01T03:57:33","modified_gmt":"2021-11-01T10:57:33","slug":"five-visual-studio-2017-extensions-for-web-developers","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/five-visual-studio-2017-extensions-for-web-developers\/","title":{"rendered":"Five Visual Studio 2017 Extensions for Web Developers"},"content":{"rendered":"<p>You\u2019ve downloaded and installed <a href=\"https:\/\/visualstudio.com\/\">Visual Studio 2017<\/a>, and it\u2019s a great improvement over previous versions.\u00a0 Now what?\u00a0 How can you make your web development experience better?\u00a0 In this article, we will recommend five Visual Studio extensions that will make your day-to-day tasks easier and even more enjoyable.<\/p>\n<h2>Razor Language Service<\/h2>\n<p>When you\u2019re building ASP.NET Core applications using the MVC pattern, it would be nice to have some assistance when writing your views in razor templates.\u00a0 The <a href=\"https:\/\/aka.ms\/razorlangsvc\">Razor Language Services extension<\/a> gives you IntelliSense for .NET expressions, hover tooltips for elements, and syntax highlighting for tag helpers.<\/p>\n<p><figure id=\"attachment_9495\" aria-labelledby=\"figcaption_attachment_9495\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"wp-image-9495 size-full\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2017\/03\/0-Razor-1.png\" alt=\"Syntax Highlighting and IntelliSense in ASP.NET Core razor files\" width=\"881\" height=\"219\" \/><figcaption id=\"figcaption_attachment_9495\" class=\"wp-caption-text\">Syntax Highlighting and IntelliSense in ASP.NET Core razor files<\/figcaption><\/figure><\/p>\n<h2>Project File Tools<\/h2>\n<p>In older versions of .NET project files, the files were difficult to hand-author.\u00a0 With the .NET Core project file updates, the syntax and content of the project file has become much simpler and now includes references to NuGet packages.\u00a0 With the <a href=\"https:\/\/aka.ms\/projfiletools\">Project File Tools extension<\/a>, you can get IntelliSense on these new features and on the NuGet packages that you are adding to your project.\u00a0 The extension will show you both local and remote packages hosted on the NuGet services referenced for your project.<\/p>\n<p><figure id=\"attachment_9505\" aria-labelledby=\"figcaption_attachment_9505\" class=\"wp-caption aligncenter\" ><img class=\"size-mediumlarge wp-image-9505\" alt=\"IntelliSense for NuGet packages in csproj files\" width=\"500\" height=\"218\" \/><figcaption id=\"figcaption_attachment_9505\" class=\"wp-caption-text\">IntelliSense for NuGet packages in csproj files<\/figcaption><\/figure><\/p>\n<h2>EditorConfig Language Service<\/h2>\n<p>We introduced a new Code Style feature in Visual Studio 2017 with Kasey and Mads demonstrating how to use it in this launch video:<\/p>\n<p style=\"text-align: center;\">\n  <iframe width=\"540\" height=\"320\" src=\"https:\/\/channel9.msdn.com\/Events\/Visual-Studio\/Visual-Studio-2017-Launch\/140\/player\" allowfullscreen><\/iframe>\n<\/p>\n<p style=\"text-align: center\"><span data-mce-type=\"bookmark\" style=\"width: 0px;overflow: hidden;line-height: 0\" class=\"mce_SELRES_start\">\ufeff<\/span><\/p>\n<p>Kasey showed us how to define some of our own preferences in an .editorconfig file, and the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MadsKristensen.EditorConfig\">EditorConfig Language Service<\/a> is the extension that makes writing those files a breeze.<\/p>\n<p><figure id=\"attachment_9515\" aria-labelledby=\"figcaption_attachment_9515\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"size-full wp-image-9515\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2017\/03\/2-EditorConfig-1.png\" alt=\"IntelliSense inside of an .EditorConfig file\" width=\"570\" height=\"430\" \/><figcaption id=\"figcaption_attachment_9515\" class=\"wp-caption-text\">IntelliSense inside of an .EditorConfig file<\/figcaption><\/figure><\/p>\n<h2>Productivity Power Tools<\/h2>\n<p>The amazing <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=VisualStudioProductTeam.ProductivityPowerPack2017\">Productivity Power Tools extension<\/a> has been updated for Visual Studio 2017 with some new bits that you\u2019re sure to want.\u00a0 This extension is now a collection of 15 other extensions, making it easier to manage and update the child extensions with new features without having to re-install the entire Productivity Power Tools collection.\u00a0 Check out some of our favorite capabilities like <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=VisualStudioProductTeam.PeekHelp\">Peek Help<\/a> for quickly showing appropriate help pages for an API inside of the editor window.<\/p>\n<p><figure id=\"attachment_9525\" aria-labelledby=\"figcaption_attachment_9525\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"size-full wp-image-9525\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2017\/03\/4-PeekHelp-1-1.png\" alt=\"Peek Help inside of the editor window\" width=\"485\" height=\"235\" \/><figcaption id=\"figcaption_attachment_9525\" class=\"wp-caption-text\">Peek Help inside of the editor window<\/figcaption><\/figure><\/p>\n<p>Also included is the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=VisualStudioProductTeam.SolutionErrorVisualizer\">Solution Error Visualizer<\/a> so that you can see indicator in Solution Explorer of exactly where your compiler warnings and errors are.<\/p>\n<p><figure id=\"attachment_9535\" aria-labelledby=\"figcaption_attachment_9535\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"size-full wp-image-9535\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2017\/03\/5-SolutionErrorVisualizer-1-1.gif\" alt=\"Solution Explorer showing errors in your project\" width=\"778\" height=\"486\" \/><figcaption id=\"figcaption_attachment_9535\" class=\"wp-caption-text\">Solution Explorer showing errors in your project<\/figcaption><\/figure><\/p>\n<h2>Web Essentials for Visual Studio 2017<\/h2>\n<p>No list of extensions for Visual Studio would be complete without mentioning <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MadsKristensen.WebExtensionPack2017\">Web Essentials<\/a>.\u00a0 Like the Productivity Power Tools, Web Essentials is now a collection of 25 child extensions that can be updated and maintained separately.\u00a0 Among the cool features in Web Essentials this time around are:<\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MadsKristensen.BrowserReloadonSave\">Browser Reload on Save<\/a> that will work with BrowserLink to force any web browser to reload that is viewing a file that was updated to disk.<\/li>\n<li>JavaScript Snippet Pack \u2013 a collection of useful code snippets that you can use in the JavaScript editor.<\/li>\n<\/ul>\n<p><figure id=\"attachment_9545\" aria-labelledby=\"figcaption_attachment_9545\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"size-full wp-image-9545\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2017\/03\/6-javascript-snippet-pack-1.gif\" alt=\"JavaScript Snippet Pack samples\" width=\"588\" height=\"188\" \/><figcaption id=\"figcaption_attachment_9545\" class=\"wp-caption-text\">JavaScript Snippet Pack samples<\/figcaption><\/figure><\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MadsKristensen.VuejsPack-18329\">vue.js Pack 2017<\/a> which contains awesome IntelliSense, icons, and snippets that make developing with the <a href=\"http:\/\/vuejs.org\/\">vue.js framework<\/a> easier in Visual Studio.<\/li>\n<\/ul>\n<p>Web Essentials also includes the Razor Language Service and Project File Tools extensions, so you don&#8217;t need to install those separately.\u00a0 Web Essentials will detect if you already have either of those extensions installed and not attempt to reinstall them.<\/p>\n<h2>Summary<\/h2>\n<p>There are hundreds of extensions available for you to try in the <a href=\"https:\/\/marketplace.visualstudio.com\">Visual Studio Marketplace<\/a>.\u00a0 These are just a selection of some that we have enjoyed and recommend.\u00a0 <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/extensibility\/starting-to-develop-visual-studio-extensions\">Visual Studio 2017 is extensible<\/a>, so you can write your own extensions to customize the editor as you need.\u00a0 Let us know what extensions you have built or recommend in the space below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019ve downloaded and installed Visual Studio 2017, and it\u2019s a great improvement over previous versions.\u00a0 Now what?\u00a0 How can you make your web development experience better?\u00a0 In this article, we will recommend five Visual Studio extensions that will make your day-to-day tasks easier and even more enjoyable. Razor Language Service When you\u2019re building ASP.NET Core [&hellip;]<\/p>\n","protected":false},"author":405,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197,7509,646],"tags":[32,7528,7524,7389],"class_list":["post-36887","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","category-aspnetcore","category-visual-studio","tag-asp-net-core","tag-extensions","tag-visual-studio-2017","tag-web-development"],"acf":[],"blog_post_summary":"<p>You\u2019ve downloaded and installed Visual Studio 2017, and it\u2019s a great improvement over previous versions.\u00a0 Now what?\u00a0 How can you make your web development experience better?\u00a0 In this article, we will recommend five Visual Studio extensions that will make your day-to-day tasks easier and even more enjoyable. Razor Language Service When you\u2019re building ASP.NET Core [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/36887","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\/405"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=36887"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/36887\/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=36887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=36887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=36887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}