Web Essentials extends Visual Studio 2012 with a lot of new features that web developers have been missing for many years. If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS, then you will find many useful features that make your life as a developer easier. This is for all Web developers using Visual Studio 2012. Download now
General
A bunch of features are not specific to a specific language or editor. These features are listed here.
Features
Settings
All settings can be found by going to Tools -> Options -> Web Essentials.
Solution scoped settings
Settings can either be global or specific to any solution. By scoping settings to individual solution, you can ensure that all team members are using the same settings.
To enable solution settings, right-click any item in Solution Explorer and click "Create solution settings".
Bundling
Any text based file can be bundled using Web Essentials.
Out of the box, Web Essentials provides shortcuts to produce bundle files for CSS and JavaScript.
These bundle files are automatically updated whenever one of the source files change.
Just right-click 2 or more CSS/JS files and click "Create CSS/JS bundle file".
Solution wide commands
These menu items are shortcuts to solution wide commands.
They can be found under Build -> Web Essentials.
Stylesheets
Most of the CSS features in Web Essentials also applies to LESS.
Intellisense
Generate vendor specifics
A lot of the new CSS 3 properties only work cross-browser if vendor specific properties are added. These include -moz, -webkit, -ms and -o.
Add missing standard property
Invoke the Smart Tag to automatically insert any missing standard properties.
Keep vendor specifics in sync
HTML elements, classes and IDs
Hacks
Specific hacks can be used to target specific versions of IE on a selector level. These are all valid according to the W3C
!important
Intellisense is now provided for !important.
Modernizr
Modernizr class names will now be bolded in the CSS editor, but more importantly, they will also be respected by the automatic hierarchical indentation feature of VS2012.
Add region
Regions are supported in the VS2012 CSS editor, but now it's even easier to add them.
Custom fonts
iOS scrollbars
VS2012 supports the different pseudo elements for customizing the iOS scrollbars. It can, however, be a little difficult to work with unless you know how to chain the pseudos correctly. That's no longer a problem.
Animation names
Inline URL picker
Just start typing and the file system shows up in Intellisense.
CSS gradients
Gradients are really difficult to write, so now examples are automatically inserted for all the different types of gradients, including the various vendor specific ones.
Hide unsupported properties
Some of the CSS properties, such as the CSS 3 FlexBox Module are not supported by any browser yet. Now you can turn all unsupported properties and pseudos off.
Hide inherit/initial
Sometimes it can feel like these two properties are too noisy in Intellisense. Though they are completely valid, you might just want to hide them.
Custom color palettes
Coming soon...
Visual cues
Browser matrix tooltip
Selector specificity tooltip
In case you've been wondering why certain styles are never applied in the browser, you can now see the specificity for each individual selector by hovering the mouse over them.
Color swatches
All color types are supported, including the new CSS 3 formats.
Font and image preview
Validation
Browser selector
Control how validation and Intellisense behaves, based on the browsers you want to support.
Best practices & Browser compatibility
Helpful error messages
Some errors are very common to make. Web Essentials will now check for those errors and provide more precise and helpful error messages to help you fix them.
Removes warnings for 9
The 9 hack isn't supported by the CSS editor and will produce error messages. Web Essentials removes the errors.
Color values
Color functions such as rgb(1, 2, 3) is validated to make sure the parameters are withing the allowed ranges.
Display inline
Using diplay:inline nulls other properties such as with, height and padding-left. Web Essentials checks for this so you can remove redundant code.
Duplicate properties
Dublicate properties are common, but should be avoided unless they are used for browser compatibility reasons. If not, Web Essentials will check for them.
Duplicate selectors
Selectors should never be duplicated in the same stylesheet
Pseudo class/element ordering
Psuedo classes goes before pseudo elements. It is, however, very difficult to figure out what pseudos are classes and what are elements. Web Essentials makes sure your psuedos are correctly sorted.
Unknown vendor specifics
Since it's very difficult to validate and verify all vendor specific properties, it becomes easy to make mistakes. The validator will automatically call out any unknown or deprecated vendor specifics.
IE10 prefixes
The IE10 Public Preview introduced new prefixed properties such as -ms-animation. The final version of IE10 did implement the unprefixed versions of those properties, rendering the use for the prefixed versions obsolete.
Missing vendor specifics
Forgot any vendor specific properties? Don't worry, Web Essentials will let you know.
Vendor specific ordering
Make sure to specify the prefixed properties before the unprefixed standard property.
Shorthand properties
You're wasting precious space by not using shorthand notation for the properties that support it.
Unknown HTML tag in selectors
It's easy to make a spelling error for an HTML element without noticing. This is now checked for using both old and new HTML 5 tag names.
Disallow universal selector
Optional. The universal selector (*) is expensive for browsers to apply. Now you can make sure that it is validated.
Over-qualified selectors
Optional. Some selectors are over qualified and slows down browser rendering.
Zero-length units
Optional. Don't like 0px and 0em? Flag them to make sure your team member removes the unit type.
Web standards
Auto-update standards
Web Essentials checks for updates to the schema files that drives both validation and Intellinsense. If an update exist, it is being downloaded in the background and immediately applied.
Vendor specific updates
When new browsers are released, they often introduce new vendor specific properties. Web Essentials automatically updates the schema files with new browser specific capabilities.
Converters
Darken/lighten colors
Place the cursor in a hex color value and hit SHIFT+CTRL+ARROW UP/DOWN to darken or lighten the color.
Convert color formats
Use Smart Tags to easily convert colors between the different formats
Sort properties
A Smart Tag on every selector enables you to easily sort all the properties within the rule.
DataURIs and background images
This will take the referenced image and base64 encode it directly into your stylesheet. You have then eliminated an HTTP requst.
Image Optimizer extension to make it effortless.
Minification
You can minify CSS directly in the editor. Just select a valid range of CSS and right-click the selection. Now click the option "Minify selection".
You can also minify and bundle entire CSS files. That is described in the General section.
JavaScript
Some of the JavaScript features also apply to TypeScript.
Features
JSHint
JSHint is a really good way of making sure your JavaScript follows certain coding guidelines and best practices. The default settings are very relaxed, but you can turn on more rules through the new options dialog.
JSHint documentation.
In version 1.8 you can also enable JSHint to run on build.
Regions
Some people hate them, other people loves them. This is a feature that was in the original Web Essentials 2010 an by popular request now made it in the 2012 version.
Outlining/code folding
Only functions provide outlining support by Visual Studio 2012. Web Essentials adds outlining supports to any scope including multiline arrays.
Minification
Right-click any JS file in Solution Explorer to produce a *.min.js file. Whenever the source .js file is changed, the .min.js file is updated accordingly.
Source Maps
When minifying, Source Map (.js.maps) files are automatically generated by enabling it in Tools -> Options.
JSDoc comments
Get full Intellisense and tooltips based on the JsDoc comment format that a lot of libraries use.
Auto-complete braces
When an opening curly brace, square bracket or parenthesis is typed, the closing ditto is inserted to the right of the cursor. Type-through is supported to not mess with muscle memory.
Smarter indent
Hitting Enter when the cursor is between an opening and closing curly brace now places the cursor correctly on the line below with the correct indentation.
HTML
The HTML editor has been extended with extra functionality.
Features
Handlebars, Mustache and JsRender
The various different syntaxes used for the flavors of Handlebars are now supported in the HTML editor.
Markdown
See the compiled markdown in a preview window inside Visual Studio.
The preview window shows the rendered HTML generated from the Markdown file.
ZenCoding Watch this short demo video and read more about the ZenCoding syntax. ZenCoding is open source. Find the code on GitHub
Lorem Ipsum generator
As part of ZenCoding, you can now generate Lorem Ipsum code directly in the HTML editor. Simply type "lorem" and hit TAB and a 30 word Lorem Ipsum text is inserted. Type "lorem10" and a 10 word Lorem Ipsum text is inserted.
This can be used in conjuction with ZenCoding like so: ul>li*5>lorem3
LESS
The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
Features
Preview window
LESS comes with a preview window located at the right side of the editor. It shows the compiled output every time you save the document.
Full editor support
The LESS editor in Web Essentials gives full support for all regular CSS capabilities.
In addition, it provides Intellisense and validation for LESS specifics.
Compiler settings You can set all the compiler settings from Tools -> Options. They include:
Compile on save
Compile on build
Enable minification
Comments