top of page

Web Essentials 2012 - Visual Studio Extension

Writer's picture: Sarah AngellSarah Angell

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:

  1. Compile on save

  2. Compile on build

  3. Enable minification

Extract to variable Web Essentials makes it easy to convert property values to LESS variables. Select the text you want extracted, right-click the selection and click "Extract to variable...". Colors are special cased and a Smart Tag makes it easy to extract all instances of the same color in the document into a LESS variable.

Extract to Mixin Select the properties you want to extract. Then right-click the selection and click "Extract to mixin...".

Minification When a LESS file is compiled, it can now also be minified to produce a much smaller CSS file.

CoffeeScript CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

Features

Preview window When a CoffeeScirpt file (.coffee) is saved in Visual Studio, Web Essentials will compile it automatically and generate a preview.

Compiler settings You can set all the compiler settings from Tools -> Options

Iced CoffeeScript You can also use the Iced CoffeeScript compiler for added features.

Outlining/code folding The CoffeeScript editor will automatically provide outlining support.

Minification When a CoffeeScript file is compiled, it can now also be minified to produce a much smaller JavaScript file.

1 view0 comments

Recent Posts

See All

M365 Community Content

There is a huge amount of great content available at https://docs.microsoft.com/en-ca/microsoft-365/community/ This repository is here...

Comments


bottom of page