Using Popular Extensions

In Chapter 11, Working with Extensions in Visual Studio, we learned how to extend utilities and functionalities by installing extensions published by the VS community and third-party vendors. We can install these extensions using Extension Manager in VS and then restart VS to see the changes in the user interface.

In this chapter, we will analyze some free and useful extensions to increase productivity and improve our experience of using VS. We will install and review these extensions in the following sections:

• Using HTML Snippet Pack
• Cleaning up code with CodeMaid
• Compiling web libraries with Web Compiler
• Identifying white space with Indent Guides
• Optimizing images with Image Optimizer
• Highlighting messages in the Output window with VSColorOutput64
• Managing .resx files easily with ResXManager

We will start with HTML Snippet Pack, an extension that helps us include some additional code snippets in VS when coding HTML...

Technical requirements

Since this chapter focuses on showing the functionality of various extensions, a project is not required for this chapter.

Using HTML Snippet Pack

In Chapter 4, Adding Code Snippets, we reviewed how code snippets can improve our productivity while we are coding. We also learned how to create, import, and remove code snippets using Code Snippets Manager.

In VS’s extension marketplace, we can find many extensions to add code snippets for different technologies by navigating to https://marketplace.visualstudio.com/ and typing snippet in the search bar (see Figure 12.1):

Figure 12.1 – Extensions related to snippets in VS Marketplace

One of the most popular snippet packs for web developers is HTML Snippet Pack by Mads Kristensen. With this extension, you can code in HTML faster, creating pieces of code and HTML elements after typing some characters in the editor.

To install the extension, search for the term HTML Snippet in the Extensions menu, as shown in Chapter 11, Working with Extensions in Visual Studio.

To use the HTML Snippet Pack extension, you need...

Cleaning up code with CodeMaid

CodeMaid VS2022, by Steve Cadwallader, is an amazing extension that helps us simplify and clean up code. It is free and compatible with C#, C++, F#, VB, PHP, PowerShell, R, JSON, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript, and TypeScript.

To install CodeMaid, type codemaid in the search bar of the Extensions window, as shown in Chapter 11, Working with Extensions in Visual Studio, and install the CodeMaid VS2022 version.

After installing CodeMaid, you will see a new option in the Extensions menu that contains all the functionalities and configurations related to CodeMaid (see Figure 12.4):

Figure 12.4 – The new CodeMaid option in the Extensions menu

For this demonstration, I’m going to use a new project with the ASP.NET Core Web App (Razor Pages) template. When there is no active document, many options are disabled, as shown in Figure 12.4; however, we can use the Cleanup All Code… option...

Compiling web libraries with Web Compiler

If you are using TypeScript, LESS, or Sass in a project, you need to pre-compile the code to get the production version of your web project so that your browser can read every line of code. Note that your browser can only read CSS, HTML, and JavaScript. Using Web Compiler by Jason Moore in VS, you can do this easily and see the precompiled code directly.

Now that we know what Web Compiler is, let’s install it and understand how to take advantage of this tool.

To install Web Compiler, go to Extensions | Manage Extensions, type web compiler in the search bar, and install the Web Compiler 2022+ extension, as shown in Chapter 11, Working with Extensions in Visual Studio.

To use Web Compiler, we can navigate to and select any JavaScript file in any project and then right-click it. This will display the Compile file option in the menu, as shown in Figure 12.8:

Figure 12.8 – The "Web Compiler...

Identifying white spaces with Indent Guides

In Chapter 11, Working with Extensions in Visual Studio, we reviewed some extensions in VS, including Color Preview. With these extensions, we learned how the text editor in VS can be extended to improve our experience and provide more tools for some technologies and scenarios. Indent Guides, created by the user Steve Dower [MSFT], is another example of this type of extension that extends the text editor in VS.

Indent Guides is a simple but useful extension that helps us identify extra white spaces and indentations in the structure of code.

To install Indent Guides, go to Extensions | Manage Extensions and type Indent Guides in the search bar. Then, install the Indent Guides for VS 2022 extension, following the steps from Chapter 11, Working with Extensions in Visual Studio.

Once you have VS running again and the installation is completed, you can open any file of any programming language supported by VS 2022 and see new guides that...

Optimizing images with Image Optimizer

Images are an essential element in any software project. It is common that when we work with images, they have a large weight, either because we have downloaded stock photos, or because of the high resolution of today’s mobile devices, and so on. This weight translates into a slower loading of pages in software projects, so it is essential to optimize them as best as possible.

Fortunately, the Image Optimizer (64-bit) extension, by Mads Kristensen, can help you optimize any JPEG, PNG, and GIF images. To install this extension, you must search for it in the Extensions tool with the term Image Optimizer and install it, as shown in Chapter 11, Working with Extensions in Visual Studio.

Once the extension has been installed, you can right-click on any image. You will see the following options:

Figure 12.11 – Optimization options for images

In Figure 12.11, you can see the following options:

...

Highlighting messages in the Output window with VSColorOutput64

If you have ever created a project with VS, you have probably had to use the Output window to print some result, or simply to see if there has been any error during the compilation or execution of your application.

Searching through the many lines generated in the Output window can be challenging since all the lines are the same color. The VSColorOutput64 extension, by Mike Ward – Ann Arbor, can help us solve this problem. To install it, you must search for it with the term VSColorOutput64 in the Extensions window and install it, as described in Chapter 11, Working with Extensions in Visual Studio.

You can use any type of project to test this extension; in my case, I have created a console application with the following code:

using System.Diagnostics;Debug.WriteLine("-- This is a test --");
Debug.WriteLine("Message: Hello World!");
Debug.WriteLine("Message: Héctor Pérez...

Managing .resx files easily with ResXManager

In many applications, it is necessary to display localized information to users, to avoid errors in the use of the application. The use of resource files, also called .resx files, is one of the most common ways to display translations to users in multiple languages. VS has a basic .resx file editor, as shown in the following figure:

Figure 12.17 – The default VS .resx file editor

In Figure 12.17, you can see that the solution has a file named Demo.resx containing English strings and another file named Demo.es.resx for storing Spanish strings. In the same figure, you can see the basic .resx file editor, where each tab represents an open .resx file.

Note

If you want to learn more about resource files, you can visit the following link: https://learn.microsoft.com/en-us/dotnet/core/extensions/create-resource-files.

Imagine that you want your application to be displayed in more than two languages...

Summary

VS has a marketplace with many extensions that we can access using the VS Manage Extensions option. We can find many extensions related to code snippets in Visual Studio Marketplace and use HTML Snippet Pack to improve our productivity while coding in HTML files.

You now know how to use CodeMaid to clean up code and improve code quality in your projects. You can easily remove empty lines and white spaces and create a custom validation format for all the files in your project. You also learned how to install Web Compiler to compile and transform web files such as JavaScript files or libraries such as LESS and Sass into generic code that a browser can easily read. Then, you explored the Indent Guides extension, which shows us white and blank spaces in code to identify how to improve the format and structure of files.

You also learned how to optimize images using Image Optimizer, how to highlight messages in the Output window using VSColorOutput64, and how to easily manage...