14 Visual Studio Web Development Productivity Tips

Visual Studio proposes quite a few handy tools to spice up your productivity as an internet developer. Here are some tips focused on web code edition and web application starting and debugging.

Short GIF animation is superb thanks to quickly learn Visual Studio productivity tips. Check others related posts based a on short GIFs here:

1) Wrap selection with div

Once you probably did a variety you'll wrap it with a variety element with the hotkey Shift+Alt.W, also available as a right-click menu.

2) The Un-minify menu

If you right-click a minified content (js, CSS, JSON, HTML…) you'll see a menu Un-minify:

3) Typing of the colon ‘:’ inserting  quotation marks around JSON property name

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

4) Create a C# class from a copied (another source) JSON fragment

Once you have copied a JSON fragment to your clipboard, you will l use the menu Edit > Paste Special > Paste JSON as Class to stick into the fragment as a strongly typed C# or VB.NET class.

5) Drag and Drop a picture from the answer Explorer to HTML Content

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

6) Encode the image in base64

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

7) Insert the image width and the height attributes

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

8) Use the Code Snippets

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

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

9) Create or Build and Use your Own Code Snippets

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

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

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

The content of this file is:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">   <!-- HTML Anchor Snippet -->   <Header>     <Title>a</Title>     <Author>Microsoft Corporation</Author>     <Shortcut>a</Shortcut>     <Description>Markup snippet for a link</Description>     <SnippetTypes>       <SnippetType>Expansion</SnippetType>       <SnippetType>SurroundsWith</SnippetType>     </SnippetTypes>   </Header>   <Snippet>     <Declarations>       <Literal>         <ID>href</ID>         <ToolTip>href</ToolTip>         <Default>#</Default>       </Literal>       <Literal>         <ID>selected</ID>         <ToolTip>content</ToolTip>         <Default>content</Default>       </Literal>     </Declarations>     <Code Language="html"><![CDATA[<a href="$href$">$selected$</a>$end$]]></Code>   </Snippet> </CodeSnippet>

 

Our new snippet shortcut is going to be at (a target equals blank). Just modify the content of a.snippet in this manner and reserve it to a file named atb. snippet.

..

    <Title>atb</Title>

    <Author>NDepend</Author>

    <Shortcut>atb</Shortcut>

    <Description>Markup snippet for a link with target equals blank</Description>

...

    <Code Language="html"><![CDATA[<a href="$href$" target="_blank">$selected$</a>$end$]]></Code>

...

Then import the atb. snippet file:

Et voilà!

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

Starting Chrome in Incognito mode to execute Ctrl+F5 and debug F5 your web applications is sort of useful. In this manner when testing your web application you avoid inheriting cookies from past sessions.

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

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

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

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

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

In the Browse With dialog, you'll select quite one browser to start. this is often pretty useful to check your application on several browsers:

12) Don’t Stop the Debugger which is debugging the things when the Browser Window Is Closed

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

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

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

If you run an ASP.NET application uncheck Project Properties > Web> Don’t open a page. await an invitation from an external application.

Take care: disabling this behavior are often quite surprising for your colleagues so confirm to spread the word.

14) Now Install the latest Visual Studio Extension HTML Tools 2019 from Mads Kristensen or any other source

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