Hidden Web Essentials Feature –Check for best practices

Today, I came across an interesting and not very obvious feature of Web Essentials for Visual Studio 2013. This feature monitors the pages of your application when you are running the application in Visual Studio and scans for some best practice rules from the Web Dev Checklist.

Web Dev Checklist

The Web Dev Checklist is a list of rules to review before deploying any website / web application. It encapsulates what is generally considered best practices in web development. If you are not familiar with the Web Dev Checklist, I recommend that you review both the standard checklist and the ASP.NET specific checklist.

Web Essentials

Let’s take a look at how Web Essentials can automatically scan your application and warn you if you are violating some of the rules from the checklist.

First, ensure you have the latest version of the Web Essentials extension for Visual Studio 2013.

Now, open a web application project in Visual Studio and run the project in any browser. Navigate to a few different pages, then close the browser.

In Visual Studio, open the Error List by selecting View –> Error List in the main menu. If Web Essentials has found any issues, you will see them listed as Warnings and Messages in the Error List.

In this example, we can see that I have missed a few things that could help with Search Engine Optimization (SEO).

This is pretty helpful. Anytime you run the application, Web Essentials is sitting in the background analyzing the pages to ensure you are following certain best practices. It’s almost as if you get to pair programming with Mads Kristensen every day!

Not only do we get this helpful list of messages, but when you double click on a particular warning/message Web Essentials will actually help you fix the problem. When I double click the message regarding semantic meaning, I am taken to a website that explains the concept of semantic meaning. When I double click the warning regarding the missing <meta> tag, the meta tag is added to the page and all I need to do is fill in the description.

 

This feature is always running the background. All you need to do to take advantage of it is check the error list after you run your application. I know I will be making a habit of checking the error list from now on.