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

Visual Studio - a truly amazing tool for application development in general (feel all marketing power of this phrase?) And web-development in particular. But the power of Visual Studio, not only in the opportunities that it is "out of the box", but in the presence of thousands of useful extensions. One of my favorite extensions, which adds support for LESS, Zen Coding and CoffeeScript, and also includes many other features, is to expand the Web Essentials 2012 ( download ), which we will discuss in this article.

Despite the fact that the cycle security update for Visual Studio 2012 is shorter than previous versions, and the first major update is already available, we as developers usually want to get new useful features as possible. And the expansion of Web Essentials can do it.

At its core, Web Essentials is an experimental extension, in which run-in features which can then enter into formal tools for web development - Microsoft Web Developer Tools, included in Visual Studio. Therefore, what is available now in Web Essentials, may soon become part of the official with Visual Studio. Naturally, by the time how certain features of the Web Essentials will be part of Visual Studio, Web Essentials appears in a lot of things new, useful and interesting, because the extension is constantly updated. Only in December 2012, was released three updates that contain new features, such as, for example, a preview window for editing Markdown files (and you like the language Markdown ?).

But let us turn to the actual capabilities of Web Essentials.

Working with CSS

First of all I would like to note that the Web Essentials is really easy to work with CSS styles. As an example of such convenience is the work with the vendor prefixes.

Vendor prefixes - is a prefix to nazvaniyayu CSS properties that are added to the browser vendors nestandratnyh properties. Examples of vendor prefixes:-moz,-ms,-webkit and-o. Often the first browser vendors implement a new CSS property vendor prefix, and then, after adjusting properties added support it without the prefix. Therefore, there may be times when you need to specify the same property multiple times with different vendor prefixes for different browsers, and also, perhaps, in the version without the prefix.

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

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

But it was not always the case. In IE8, the following code will not work, even though IE8 supports the opportunities provided by the property word-wrap. For this version of the browser, you must specify the word-wrap property with 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 the missing, but still necessary, properties with vendor prefixes, the base CSS properties are updated automatically and you do not have to remember what vendor prefixes to use.

Often there are situations in which the properties that previously required vendrnyh prefixes become standard. But the project you created a long time ago and the fact that the property has become a standard you do not. Let's say you have a style that uses the-moz-transform.

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

This code will only work in Firefox. And this is very bad. With Web Essentials, you'll learn what you need to add a standard feature transform, as well as properties with vendor prefixes for the 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 which versions of browsers used. So, transform the value rotate (<angle>) works with Firefox 16, IE10, and Opera 12.5.

A-webkit-transform set to rotate (<angle>) will work for Chrome, Safari 3.1 and above, as well as Opera 12 and above.

Take into account only that properties with vendor prefixes and without may have different features and behavior. Since non-standard version of the property, implemented in the browser before, may be different from that adopted or want to adopt as a standard.

Working with individual CSS styles and properties easily. But in a large CSS file is difficult to find all the problems, if the problem areas highlighted just wavy. So Web Essentials lets you see all the problems in one list.

In addition, with the help of Web Essentials can immediately solve the problems found and optimize large CSS file by doing the following:

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

Opportunities Web Essentials is not confined to work with vendor prefixes. Among the other features that I really like, you can easily convert primesti example image DataURI .

Suppose your project is an image that you inserted a link to the file:

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

With Web Essentials is an image in one click base64 encoded and converted to 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 */ } 

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

We have examined only a few of the possibilities of Web Essentials to work with CSS. In order not to overload the article leave the reader to independently introduce features such as support for styling of scrollbars for iOS, working with CSS3 animation, lighting colors (see picture), etc.

And we still consider the extension support for CSS, which allows you to have more fun creating CSS styles, overcoming a number of limitations of CSS, and simply write less CSS code.

Support for LESS

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

Web Essentials Visual Studio adds a full-featured editor LESS files with syntax highlighting and support IntelliScence. LESS files are automatically compiled into CSS, while generating and minifitsirovannuyu version of CSS files. Besides editing LESS files in the preview window displays the generated CSS.

Here is an example LESS code containing a variable and hagfish (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(); } 

Of this code will generate the following CSS styles:

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

Support CoffeeScript

Web Essentials also adds support for CoffeeScript language , which is one of the alternatives to JavaScript and at that JavaScript is compiled. Supported code editor with syntax highlighting and automatic compilation JavaScript to generation including minifitsirovannoy version.

CoffeeScript is a very powerful language, but to me personally, as a person who is accustomed to the syntax of C #, but not Ruby (for fans of Ruby CoffeeScript is ideal) is more like language TypeScript from Microsoft, for whose support in Visual Studio, you must install the official development tools (and Web Essentials simply improves with TypeScript).

ZenCoding to HTML

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

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

 div#content>h1+p 

After this you should press the Tab. And generate the following HTML markup:

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

To learn more about ZenCoding possible from the video.

Minifikatsiya styles and scripts, creating Bandlov

Web Essentials allow minifitsirovat CSS and JavaScript files. To do this in the context menu of the file (s) in the Solution Explorer, select the Web Essentials | Minify CSS file (s) or Minify JavaScript file (s). In this case, when the source file minifitsirovanny reparsed file automatically.

Also, using the Web Essentials can create bundles of multiple files. To Bundle automatically generated minifitsirovannaya version. If one of the source files in banld himself and his bundle minifitsirovannaya peregeneriruetsya version automatically.

JSHint for JavaScript

Develop applications in JavaScript is difficult. To make application development easier to follow the best practices of existing tools such as JSHint . JSHint finds errors and potential problems in JavaScript code, and also shows the discrepancies to the Convention.

Web Essentials adds support JSHint in Visual Studio. To run JSHint the context menu JavaScript file in the Solution Explorer option Web Essentials | Run JSHint. After that, in the Error List window displays all problems found.

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

Results of

We have considered only a fraction of Web Essentials 2012. But even from this brief review shows how powerful this extension. We do not cover a lot of topics, such as I would like to talk in more detail about the job with Typescript - a new language from Microsoft, which is compiled into JavaScript and supports static typing, classes, modules and interfaces.

I will be immensely happy if you install Web Essentials and try the above, and is not considered, but certainly useful features yourself! This extension really helps in the development of web applications, try it!