Web Essentials extension for Visual Studio: LESS, Zen Coding, CoffeeScript, and more

Visual Studio is a truly awesome application development tool in general (do you feel the full marketing power of this phrase?) And web development in particular. But the power of Visual Studio is not only in the capabilities that it has out of the box, but also in the presence of thousands of useful extensions. One of my favorite extensions, which adds support for LESS, Zen Coding, and CoffeeScript, as well as many other features, is the Web Essentials 2012 ( download ) extension, which we'll discuss in this article.

Despite the fact that the release cycle of updates for Visual Studio 2012 is shorter than for previous versions, and the first major update is already available, we, as developers, usually want to get new useful features as early as possible. And the Web Essentials extension allows you to do this.

In essence, Web Essentials is an experimental extension, where the opportunities that can be included in the official tools for web development, Microsoft Web Developer Tools, included in Visual Studio, are tested. Therefore, what is available now in Web Essentials may soon become part of the official delivery of Visual Studio. Naturally, by the time these or other features from Web Essentials become part of Visual Studio, a lot of new, useful and interesting things will appear in Web Essentials, as the extension is constantly being updated. Only in December 2012, three updates were released that contained a new functionality, such as, for example, a preview window when editing Markdown files (do you like the Markdown ? Language).
')
But let's get to the very capabilities of Web Essentials.

Work with CSS

First of all, I would like to point out that it’s really convenient to work with CSS styles with Web Essentials. As an example of such convenience, you can cite work with vendor prefixes.

Vendor prefixes are prefixes to the name of CSS properties, which are added by browser manufacturers for non-standard properties. Examples of vendor prefixes: –moz, -ms, -webkit, and –o. Often, browser vendors first implement a new CSS property with a vendor prefix, and then, after standardizing the property, add it to support without the prefix. Therefore, there may be situations when you need to specify the same property several times with different vendor prefixes for different browsers, and also, possibly, in the version without prefix.

For example, now all modern browsers support the word-wrap property. And we can use it directly:

#text { word-wrap: break-word; } 

But it was not always so. In IE8, this code will not work, although IE8 supports the capabilities provided by the word-wrap property. For this version of the browser, you must specify the word-wrap property with the vendor prefix: -ms-word-wrap.

 #text { -ms-word-wrap: break-word; word-wrap: break-word; } 

This is easy to forget. Web Essentials allows you to add missing, but still necessary, properties with vendor prefixes, and the CSS database of properties is updated automatically and you do not need to remember which vendor prefixes you need to use.

Often there are situations when the properties that previously required vendor prefixes become standard. But you once created your project a long time ago and you don’t know that the property became standard. Suppose you have a style that uses the -moz-transform property.

 .foother { -moz-transform: rotate(10deg); } 

This code will only work in Firefox. And it's very bad. Using Web Essentials, you’ll learn that you need to add a standard transform property, as well as vendor prefix properties for other browsers.

 .foother { -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); } 

In addition, you can find out which property is used by which browser versions. So, the transform with the value rotate (<angle>) works with Firefox 16, IE10 and Opera 12.5.

A –webkit-transform with a rotate value (<angle>) will work for Chrome, Safari 3.1 and above, and also for Opera 12 and above.

Take into account only that properties with and without vendor prefixes may have different capabilities and behavior. Since the non-standard version of the property, which was previously implemented in the browser, may differ from what was accepted or will be accepted as the standard.

Working with individual CSS styles and properties is simple. But in a large CSS file it is difficult to find all the problems, if the problem areas are simply underlined with a wavy line. Therefore, Web Essentials allows you to see all the problems in one list.

In addition, using Web Essentials, you can immediately solve the problems found and optimize a large CSS file by doing the following:

1. Remove duplicate properties
2. Add missing standard properties
3. Add missing properties with vendor prefixes
4. Sort all properties

Web Essentials capabilities are not limited to working with vendor prefixes. Of the other features that I really like, you can use an example of easy image conversion into DataURI .

Suppose in your project there is an image inserted by a link to the file:

 .foother { background-image: url(themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png); } 

Using Web Essentials, this one-click image is encoded in base64 and converted into the following CSS code:

 .foother { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAe0lEQVRoge3OMQHAIBAAMcC/kjdZJHTI0A4XBdkz86wfO18H3hRUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUF8O8A8WdY6opAAAAAElFTkSuQmCC') /*themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png*/; *background-image: url(themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png); /* For IE 6 and 7 */ } : image / png; base64, iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAe0lEQVRoge3OMQHAIBAAMcC / kjdZJHTI0A4XBdkz86wfO18H3hRUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUF8O8A8WdY6opAAAAAElFTkSuQmCC') /*themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png*/; .foother { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAe0lEQVRoge3OMQHAIBAAMcC/kjdZJHTI0A4XBdkz86wfO18H3hRUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUF8O8A8WdY6opAAAAAElFTkSuQmCC') /*themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png*/; *background-image: url(themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png); /* For IE 6 and 7 */ } 

Note that this takes into account compatibility issues with earlier versions of Internet Explorer.

Above only some of the features of Web Essentials for working with CSS were considered. In order not to overload the article, I’ll leave the reader to independently familiarize features such as support for styling scrollbars for iOS, working with CSS3 animation, highlighting colors (see figure), etc.

For now, we’ll consider support for CSS extensions, which allows us to get more pleasure from creating CSS styles, overcoming a number of limitations inherent in CSS, and also just write less CSS code.

LESS support

LESS is a language that extends CSS and supports features such as variables, mixins, operations, and functions. On Habré there is a good article about LESS . I will not repeat it here.

Web Essentials adds a full-featured LESS file editor with syntax highlighting and IntelliScence support to Visual Studio. LESS files will be automatically compiled into CSS, generating a minified version of CSS files. In addition, when editing LESS files, the generated CSS is displayed in the preview window.

I will give an example of a LESS code containing a variable and mixin (mixin, mixing) :

 @corner: 15px; .round_courners(@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .round_courners(@corner); } #footer { .round_courners(); } 

The following CSS styles will be generated from this code:

 #header { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } #footer { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } 

CoffeeScript support

Web Essentials also adds support for the CoffeeScript language , which is one of the alternatives to JavaScript and is compiled into this very JavaScript. A code editor with syntax highlighting is supported and automatic compilation is performed in JavaScript with generation including the minified version.

CoffeeScript is a very powerful language, although for me personally, as a person who is used to the C # syntax rather than Ruby (for Ruby fans, CoffeeScript fits perfectly), Microsoft’s TypeScript language is more popular, to support which you need to install official development tools in Visual Studio Web Essentials simply improves on working with TypeScript).

ZenCoding for HTML

Like LESS, ZenCoding has already been discussed at Habré . ZenCoding is a tool that allows you to quickly create HTML markup in this case. This is achieved due to the fact that you can write a relatively simple string for ZenCoding, which is then converted into complex HTML markup.

For example, in the HTML editor in Visual Studio, you can type:

 div#content>h1+p 

After that, press the Tab key. And the following HTML markup will be generated:

 <div id="content"> <h1></h1> <p></p> </div> 

You can learn more about ZenCoding from the video.

Minification of styles and scripts, creating bundles

Web Essentials allows you to minify CSS and JavaScript files. To do this, in the context menu of the file (s) in the Solution Explorer window, select Web Essentials | Minify CSS file (s) or Minify JavaScript file (s). At the same time, when the source file is changed, the minified file will be automatically regenerated.

You can also create bundles from multiple files using Web Essentials. For the bundle, a minified version is automatically generated. When changing one of the source files included in the band, the bandl itself and its minified version will be automatically regenerated.

Jshint for javascript

Developing applications in JavaScript is quite difficult. To make it easier to follow best practices when developing applications, there are tools such as JSHint . JSHint finds errors and potential problems in the JavaScript code, and also shows inconsistencies with accepted conventions.

Web Essentials adds JSHint support in Visual Studio. To launch JSHint, in the context menu of the JavaScript file in the Solution Explorer, select the Web Essentials | Run JSHint. After that, all found problems will be displayed in the Error List window.

JSHint can also be automatically launched when building a project. This way you can make your JavaScript code better (if, of course, you follow the JSHint recommendations).

Results

We have reviewed only a part of the capabilities of Web Essentials 2012. But even from such a small overview you can see how powerful this extension is. We have not covered many topics, for example, I would like to tell you in more detail about working with TypeScript - a new language from Microsoft, which is compiled into JavaScript and supports static typing, classes, modules and interfaces.

I would be immensely happy if you install Web Essentials and try the above, and also not considered, but certainly useful features on your own! This extension really helps in the development of web applications, try it!