ASP.NET Hosting - Click Here!

The HTML editor has been extended with extra functionality.

Features

Minify Selection

Right-click your selection in the editor and select to have it minified.

Minify HTML file

Right-click one or more .html file in Solution Explorer and click Minify HTML File(s). It will create a *.min.html file and automatically keep it in sync when the source file changes.

Bundle HTML

Select 2 or more HTML files in Solution Explorer, then right-click and select Create HTML Bundle File.

This feature makes it easy to bundle multiple HTML templates for use in SPA's.

Image hover preview

See the image when the mouse hovers the <img> tag

ZenCoding

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

Lorem Pixel generator

As part of ZenCoding, you can also generate Lorem Pixel code directly in the HTML editor. Simply type pix-200x200-animals and hit TAB and a img tag with a 200x200 image of an animal is inserted.

This video will demonstrate more options available with the ZenCoding Lorem Pixel generator:

PlaceHold.it generator

ZenCoding also support PlaceHold.it if you prefer blank images. Type place-50 and hit TAB to have a 50 pixels square image. Use place-200x100 to insert a rectangular image.

You can choose the background color by adding the hexadecimal value after the size like this place-150x240-EEEDDD. You can even add text to the image by using place-150x240-EEE-t=This%20is%20some%20text.

Commands

Surround with tag

In the HTML editor, click Shift+Alt+W to surround the selection with a new tag

#Region support

Collapsable regions

Expand selection

Hit Alt+1 to expand the selection and Alt+2 to contract it.

Format on ENTER

Hit ENTER and your HTML is automatically formatted with new lines etc.

Find all references

Hit Shift+F12 when the cursor is located inside a class attribute. Web Essentials will search all CSS, LESS and SASS files for the class name.

Go To Definition

Hit F12 when the cursor is located inside a class attribute. Web Essentials will jump to the location inside CSS, LESS and SASS files.

Meta tags

Full Intellisense provided for:

  • Apple iOS
  • Twitter Cards
  • Facebook/OpenGraph
  • Windows 8
  • Internet Explorer 9+
  • Viewport

Dynamic Intellisense

Dynamic Intellisense is where Intellisense is based on other tags and attributes etc.

  • <label for="here">
  • <input id="here" /> based on <label> tags
  • <datalist> IDs

Smart Tags

Base64 decoding

Any base64 image can be easily converted back to a file on disk.

Extract JavaScript to file

<script> tags can easily be extracted to a .js file on disk.

Remove parent tags

Any HTML element containting child elements can easily be removed while keeping the children.

Extract Stylesheets to file

<style> tags can easily be extracted to a .css/.less file on disk.

AngularJS controller generation

Any HTML element with a ng-controller attribute has a Smart Tag for generating the .js controller file.

Minify CSS and JavaScript

An easy way to minify embedded CSS and JavaScript.

Validation

Missing Angular attribute

If you're using certain AngularJS specific attributes, but forgot the ng-app attribute, then you'll be notified by this validator.

OpenGraph prefix

When working with Facebook/OpenGraph integration, we need to remember to add the prefix attribute to the <head> element.

Foundation column validations

Zurb Foundation grid system allows you to quickly set a responsive grid design. This validator makes sure you easily have everything at the right place.

  • Checks for the presence of columns (or column) class if you define a small-*, medium-* or large-* class, and vice versa.
  • Checks for the sum of each column's width that you set in order to ensure you do not exceed 12.
  • If you define less than 12 columns, makes sure that the last column contains the end class.
Read more at foundation.zurb.com

Missing Bootstrap class

In Twitter Bootstrap you need to chain certain class names. For instance, when using btn-primary you also need to include the btn class name. This validator makes sure you don't forget that. It also checks for the presence of the required Bootstrap row class on a parent element of your column declarations. Read more at getbootstrap.com

This validator also checks for missing dependant class names for FontAwesome.

Microdata

Validates that the itemtype attribute is a valid absolute URL.