Styling and Cleanup Tools

Whether you are a frontend developer or a backend developer, having tools that help you maintain clean code is essential to move projects forward in an efficient manner.

Similarly, having tools that allow you to edit CSS files quicker helps the development team move faster on a project. Fortunately, VS has several tools that you can use while working with CSS files that will allow you to write and complete your styles quickly and in a user-friendly way.

If you are a backend programmer and you use C# or Visual Basic, you should also know that there are code analysis tools, both to maintain good quality and to follow nomenclatures that you can define.

Here are the main topics we will cover in this chapter:

• Working with CSS styling tools
• Cleaning code with code analysis tools

Technical requirements

To perform the tests that will be explored throughout this chapter, you must have installed the workload shown in Chapter 1, Getting Started with Visual Studio 2022.

In addition, to follow along with the Working with images section, you must install an additional component called Image and 3D model editors, as shown in the following figure:

Figure 7.1 – The "Image and 3D model editors" individual component selection

You can find the example source code in this book’s GitHub repository: https://github.com/PacktPublishing/Hands-On-Visual-Studio-2022-Second-Edition/tree/main/Chapter%207.

Woking with CSS styling tools

Having tools for editing CSS files is an advantage for frontend web developers as it allows them to edit these files quickly and easily. That is why VS contains several tools that can be of great help in creating and editing these files.

We’ll start by examining CSS3 snippets.

CSS3 snippets

Even today, there are cross-browser compatibility issues for displaying styles. Surely, it must have happened to you that when implementing a CSS property; it looks different on each browser.

It is for this reason that VS has implemented a CSS3 snippet completion system that allows cross-browser compatibility without the need to write code for each browser.

To see this practically, we can open the Chapter7_Code | wwwroot | css | app.css file and locate the .content style. Within this style, we can start typing border-radius. This will display a list of IntelliSense recommendations, as shown in Figure 7.2:

Figure 7.2 ...

Cleaning code with code analysis tools

VS 2022 includes a series of C# or Visual Basic code analyzers that allow us to maintain good code quality and consistent style in the source code. To use this feature by default, projects must be configured on a framework version of .NET 5 or higher. To differentiate compilation errors, analysis violations will appear with the CA prefix in the case of a code quality analysis violation and IDE in the case of a style analysis violation.

The code analysis tools correspond to code quality analysis and code style analysis, so we will see what they are, how they can help us, and learn how to set up and run code cleanup profiles. First, let’s look at how to take advantage of code quality analysis.

Code quality analysis

Code quality involves having secure source code, with the best possible performance and good design, among other characteristics. Fortunately, VS can help us to maintain high-quality code through rules enabled by default...

Summary

In this chapter, we learned about the different tools that VS has for frontend and backend developers.

We learned how CSS3 snippets can help create cross-browser-compatible styles quickly. Likewise, we saw how hierarchical CSS indentation helps to keep styles readable. We also learned about the color picker, which can help will selecting colors quickly, and we saw how IntelliSense is present when we need to edit CSS files. Finally, we saw how the image editor provides useful tools if we need to make basic edits to our images.

In the case of code analysis, we learned how code quality analysis can help us have safe and reliable code and how it helps us maintain a nomenclature, regardless of whether we are working individually or with a team of developers.

In Chapter 8, Publishing Projects, you will learn about the most common ways to publish projects on different platforms.