If you are a developer or a programmer, you would probably like to use the following tools and features. We will discuss the most important and helpful Visual Studio Extensions.
Once you install the above extensions, restart Visual Studio and create a new Web application project (Empty).
Now, let’s try some features
demo for ASP.NET Web Development purposes. I am considering only these features for demo purposes which are mostly used.
Visual Studio provides us with multiple code snippets which save our typing work and writes the code for us. In the below image, if a developer wants to create a constructor of a class, then he/she can use ‘ctor’ command and press double tab, which will create a constructor of that class.
Code alignment is a very nice feature of Productivity Power Tools. Below is a snippet of unaligned code.
Now, press Ctrl + Alt + ]. All the code will be aligned like below.
If you are a blogger like me and want to show code snippets on a web page in the exact alignments and colors, then ‘Copy to HTML’ feature is helpful. Select the text and go to Edit menu followed by a click on ‘Copy Html Markup’.
Once you do the above steps, an HTML code will be copied to the clipboard and once you paste it in a div in HTML page, it will display the following results.
Isn’t it interesting?
Ctrl + Click Go to Definition is a very helpful feature at the time of debugging any issue. Suppose you are debugging an issue and suddenly a class came. You want to know what is there inside of that class. Then, hover the mouse on the class name, press Ctrl, and you will see that the class name will be converted to a hyperlink and when you click that hyperlink, all the code written in that class/method will become visible in a small document well in between the pages. This saves time that is wasted in navigation to different pages.
Visibility of status of selected items is on the Vertical scrollbar. This feature is helpful in those scenarios where you have a long page with lots of code written and you want to find something at the center of the page.
- If you have put a bookmark or breakpoint on that, it will display a red dot on the vertical scroll bar at that place and you can easily navigate to that place.
- If you select any keyword, it will display it in blue.
- If you have some warnings, they will be displayed in green.
Online help within a code is helpful when you want to look for the definition of some keywords. Simply select that keyword, press Alt + F1, and a document will be visible with the definition of that keyword from Microsoft’s site.
Solution error Visualizer
Suppose you have a huge project with lots and lots of files. Now, you want to know how many errors, suggestions, and warnings there are in the whole project/solution. Then, this feature will do it all for you. You can see green, red, yellow etc. underlines under those file names in the Solution Explorer that needs review and fixing.
Also, it will give you some error code so that when you click on that, it will search the web for that code and show you some suggestions.
Power commands are those which let you fix the error without you doing it manually. For example, if you want to remove unwanted code and sort alphabetically, then use the below steps.
Add new file
This feature is helpful when you want to add a file in the project and you want to avoid those bulky dialog boxes which ask you to check the type of file, select them, name them and click on OK. Instead, you can do all these things within one single window.
Or use Shift + F2, for saving time.
The above will add the file with extension.
Multiple Browsers
This is helpful when you are developing a web application and want to open the web page in multiple browsers at once. So, you can do the following.
You can select as many as you want.
If you have multiple JS/CSS files and you want to merge them and minify the code inside them, then Bundler and Minifier is the best tool. Just select the files and use the option.
Helpers for CSS
This is a very helpful feature. Like if you have a color hex code, once you add that code to a web page, it will display that color instantly and likewise, if you chose some font, once you hover over its name, the font style will be displayed instantly.
If you have multiple text values that need proper casing, you just select all of them at once and go to Edit menu -> Transform Selection and choose the appropriate option.
Code snippets for Web pages
If you want to add an image tag on a webpage, or want to add unordered list, simply type ‘image’ and press Tab. You will see the magic like below.
I hope you will use the above features and they will help you in increasing your productivity.