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



    Visual Studio is a truly terrific tool for developing applications in general (feel the marketing power of this phrase?) And web development in particular. But the strength 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, and also contains many other features, is the Web Essentials 2012 extension ( download ), which we will talk about in this article.

    Despite the fact that the update release cycle for Visual Studio 2012 is shorter than for previous versions, the first major update isalready 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.

    At its core, Web Essentials is an experimental extension that runs on those features that can then be incorporated into the official tools for web development - Microsoft Web Developer Tools included in Visual Studio. Therefore, what is now available in Web Essentials may soon become part of the official Visual Studio distribution. Naturally, by the time these or those features from Web Essentials become part of Visual Studio, much more new, useful and interesting will appear in Web Essentials, as the extension is constantly updated. Only in December 2012, three updates were released that contained new functionality, such as, for example, a preview window when editing Markdown files (do you like Markdown ?).

    But let's move on to the very capabilities of Web Essentials.

    CSS Work


    First of all, I would like to note that it is really convenient to work with CSS styles with Web Essentials. As an example of such convenience, we can cite the work with vendor prefixes.

    Vendor prefixes are prefixes for CSS property names that are added by browser manufacturers for non-standard properties. Examples of vendor prefixes are –moz, -ms, -webkit and –o. Often, browser makers first implement a new CSS property with a vendor prefix, and then, after standardizing the property, add support for it without a prefix. Therefore, situations may arise when you need to specify the same property several times with different vendor prefixes for different browsers, and also, possibly, in the version without a 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 does support the features 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 properties database is updated automatically and you do not need to remember which vendor prefixes you need to use.

    Often there are situations when properties that previously required vendor prefixes become standard. But you created your project long ago and you don’t know that the property has become standard. Suppose you have a style that uses the -moz-transform property.
    .foother {
        -moz-transform: rotate(10deg);
    }
    

    Such code will only work in Firefox. And it's very bad. Using Web Essentials, you will learn that you need to add the standard transform property, as well as properties with vendor prefixes 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 what property is used by which browser versions. So, transform with a value of rotate (<angle>) works with Firefox 16, IE10 and Opera 12.5.

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

    Bear in mind that properties with and without vendor prefixes can have different capabilities and behavior. Since the non-standard version of the property implemented in the browser earlier may differ from what they accepted or want to accept as the standard.

    Working with individual CSS styles and properties is easy. But in a large CSS file, it can be difficult to find all the problems if the problem areas are simply underlined by 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 the large CSS file by doing the following:

    1. Remove duplicate properties
    2. Add Skipped Standard Properties
    3. Add missing properties with vendor prefixes
    4. Sort all properties


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

    Suppose in your project there is an image inserted by a link to a 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 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 compatibility issues with earlier versions of Internet Explorer.

    Above, only some of the Web Essentials CSS capabilities have been discussed. In order not to overload the article, I will leave the reader to familiarize myself with such features as support for styling scrollbars for iOS, working with CSS3 animations, highlighting colors (see figure), etc.

    In the meantime, we will consider support for the extension for CSS, which allows you 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 to Visual Studio a full-featured syntax-highlighted LESS file editor with IntelliScence support. LESS files will be automatically compiled into CSS, while 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 LESS code containing a variable and a 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 CoffeeScript , which is one of the alternatives to JavaScript and compiles into this JavaScript. A code editor with syntax highlighting is supported and automatic compilation is performed in JavaScript with generation including a minified version.

    CoffeeScript is a very powerful language, although I personally, as a person who is used to the C # syntax rather than Ruby (for Ruby lovers, CoffeeScript is ideal), I prefer TypeScript from Microsoft, to support which you need to install official development tools in Visual Studio (and Web Essentials simply improves TypeScript.)

    ZenCoding for HTML


    Like LESS, ZenCoding has already been discussed on 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 line for ZenCoding, which is then converted into complex HTML markup.

    For example, in the HTML editor in Visual Studio, you can enter:
    div#content>h1+p
    

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


    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, select Web Essentials | in the context menu of the file (s) in the Solution Explorer window. Minify CSS file (s) or Minify JavaScript file (s). In this case, when changing the source file, the minified file will be automatically regenerated.

    Using Web Essentials, you can also create bundles from multiple files. A minified version is automatically generated for the bundle. When changing one of the source files included in the bundle, the bundle itself and its minified version are automatically regenerated.

    JSHint for JavaScript


    Developing JavaScript applications is difficult. To make it easier to follow best practices when developing applications, tools like JSHint exist . JSHint detects errors and potential problems in JavaScript code, and also shows inconsistencies with accepted conventions.

    Web Essentials adds JSHint support to Visual Studio. To launch JSHint, select the Web Essentials | Run JSHint. After that, the Error List window will display all the problems found.

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

    Summary


    We examined only a part of the capabilities of Web Essentials 2012. But even from such a small review you can see how powerful this extension is. We did not cover many topics, for example, I would like to talk in more detail about working with TypeScript , a new language from Microsoft that compiles in JavaScript and supports static typing, classes, modules, and interfaces.

    I will be immensely glad if you install Web Essentials and try the ones discussed above, as well as not considered, but certainly useful features yourself! This extension really helps with the development of web applications, try it!

    Also popular now: