NDepend

Improve your .NET code quality with NDepend

14 Visual Studio Web Development Productivity Tips

Visual Studio proposes quite a few handy tools to boost your productivity as a web developer. Here are some tips focused around web code edition and web application starting and debugging.

Short GIF is an excellent way to quickly learn Visual Studio productivity tips. See others related posts based also on short GIFs here:

1) Wrap selection with div

Once you did a selection you can wrap it with a <div>selection</div> element with the hotkey Shift+Alt.W, also available as a right click menu.

Visual Studio: Wrap with div (Shift+Alt+W)
Visual Studio: Wrap with div (Shift+Alt+W)

2) The Un-minify menu

If you right-click a minified content (js, css, json, html…) you can see a menu Un-minify:

Visual Studio: Un-Minify Menu
Visual Studio: Un-Minify Menu

3) Typing colon ‘:’ insert quotation marks around JSON property name

When typing the colon character ‘:’ the quotation marks are automatically added around the preceding JSON property name:

Visual Studio Json Edit: typing colon ':' insert the quotes
Visual Studio Json Edit: typing colon ‘:’ insert the quotes

4) Create a C# class from a copied JSON fragment

Once you’ve copied a JSON fragment to the clipboard, you can use the menu Edit > Paste Special > Paste JSON as Class to paste the fragment as a strongly typed C# or VB.NET class.

Paste Json as Class
Paste Json as Class

5) Drag and Drop an Image from the Solution Explorer to HTML Content

You can drag and drop an image from the Visual Studio Solution Explorer to HTML content. The <img> tag is then created with the proper relative path.

Visual Studio: Drag and Drop and Image to HTML
Visual Studio: Drag and Drop and Image to HTML

6) Encode image in base64

When the editor carret is over an <img> element, a light bulb appears on the left. Type Ctrl+. to open the bulb menu and select the menu Encode image in base64:

Visual Studio: Encode image in base64
Visual Studio: Encode image in base64

7) Insert image width and height attributes

The <img> light bulb menu also proposes the menu Insert width and height attributes. These image size attributes are used by the browser renderer to allocate the necessary area until the image gets loaded. This trick is important because it improves the page loading user experience. Indeed, with this tricks the page elements get their definitive location as soon as they appear.

Visual Studio: Insert Image Width and Height Attributes
Visual Studio: Insert Image Width and Height Attributes

8) Use Code Snippets

Code snippets are especially useful when editing HTML-like code thanks to the surround with possibility.

Just select the code element to surround then use the hotkey Ctrl+K, Ctrl+X to choose your snippet.

Visual Studio: Surround with a HTML code snippet
Visual Studio: Surround with a HTML code snippet

9) Create and Use your Own Code Snippets

You can access the Code Snippets Manager dialog from the menu Visual Studio > Tools > Code Snippets Manager… or with the hotkey Ctrl+K, Ctrl+B.

Visual Studio: Code Snippets Manager
Visual Studio: Code Snippets Manager

The easiest way to create your own snippet is to modify an existing one. Suppose that you want a snippet that add target=”_blank” on <a> link: <a href=”$” target=”_blank”>$selected$</a>.

To do so let’s modify the <a href=”$”>$selected$</a> default snippet just shown in the previous section. You can obtain the path to the a.snippet file from the Code Snippets Manager dialog.

Visual Studio: Get the path of a snippet file
Visual Studio: Get the path of a snippet file

The content of this file is:

Our new snippet shortcut will be atb (a target equals blank). Just modify the content of a.snippet this way and save it to a file named atb.snippet.

Then import the atb.snippet file:

Visual Studio: Import a custom snippet
Visual Studio: Import a custom snippet

Et voilà!

Visual Studio: Using a snippet imported!
Visual Studio: Using a snippet imported!

10) Start Chrome in Incognito Mode to Execute and Debug your Web Application

Starting Chrome in Incognito mode to execute Ctrl+F5 and debug F5 your web applications is quite useful. This way when testing your web application you avoid inheriting cookies from past sessions.

To start Chrome in Incognito mode you’ll need to add a new web browser entry. Click the menu Start > Browse with….

Visual Studio: Browse your WebApplication with
Visual Studio: Browse your WebApplication with

Then get the absolute path to chrome.exe by selecting the Chrome row: (it is C:\Program Files (x86)\Google\Chrome\Application\chrome.exe on my system)

Get the absolute path to chrome.exe
Get the absolute path to chrome.exe

Add Chrome Incognito in the list of browser. For that put the chrome.exe absolute path with the –incognito argument:

Visual Studio: Add Chrome Incognito in the List of Browsers
Visual Studio: Add Chrome Incognito in the List of Browsers

Finally set Chrome Incognito as the default browser et voilà!

Set Chrome Incognito as Default Browser to Start
Set Chrome Incognito as Default Browser to Start

11) Start Several Browsers to Execute and Debug your Web Application

In the Browse With dialog you can select more than one browser to start. This is pretty useful to test your application on several browsers:

Start your Web Application with Several Browsers
Start your Web Application with Several Browsers

12) Don’t Stop the Debugger when the Browser Window Is Closed

The default behavior of stopping the debugger when your test browser window is closed can be quite annoying. Yo might just want to re-use your existing debug session by opening a new browser window. To do so just uncheck Tools > Options > Projects and Solutions > Web Projects > Stop debugger when browser window is closed:

Visual Studio: Don't stop the debugger when the browser window is closed
Visual Studio: Don’t stop the debugger when the browser window is closed

13) Don’t Start a New Browser Window When Starting Debug

Often we don’t need a new a new browser window when starting a new browser debugging session. If you run an ASP .NET Core Application you can disable this behavior by unchecking Project properties > Debug > Launch browser:

ASP.NET Core Don't open a new browser window when starting
ASP.NET Core: Don’t open a new browser window when starting

If you run an ASP.NET application un check  Project Properties > Web> Don’t open a page. Wait for a request from an external application.

ASP.NET Application: Don't open a page
ASP.NET Application: Don’t open a page

Take care: disabling this behavior can be quite surprising for your colleagues so make sure to spread the word.

14) Install the Visual Studio Extension HTML Tools 2019 from Mads Kristensen

The extension HTML Tools 2019 from Mads Kristensen proposes quite a few handy tools that will improve your productivity as a web developer!

My dad being an early programmer in the 70's, I have been fortunate to switch from playing with Lego, to program my own micro-games, when I was still a kid. Since then I never stop programming.

I graduated in Mathematics and Software engineering. After a decade of C++ programming and consultancy, I got interested in the brand new .NET platform in 2002. I had the chance to write the best-seller book (in French) on .NET and C#, published by O'Reilly (> 15.000 copies) and also did manage some academic and professional courses on the platform and C#.

Over the years, I gained a passion for understanding structure and evolution of large complex real-world applications, and for talking with talented developers behind it. As a consequence, I got interested in static code analysis and started the project NDepend.

Today, with more than 8.000 client companies, including many of the Fortune 500 ones, NDepend offers deeper insight and understanding about their code bases to a wide range of professional users around the world.

I live with my wife and our twin babies Léna and Paul, in the beautiful island of Mauritius in the Indian Ocean.

Comments:

  1. Thanks for these tips. I have tried tip number 6, Encode image in base64, but it is not working for me. I added an image tag and set its src attribute. Then I set the editor carret over the element and a light bulb appears on the left. When I selected the command “Encode image in base64”, nothing happens. I am using Version 16.6.5 of Microsoft Visual Studio Professional 2019. Any ideas why it is not working for me?

Leave a Reply

Your email address will not be published. Required fields are marked *