Tag: TypeScript

Web Essentials 2012 – Visual Studio Extension

2013-01-24 9-46-22 AMWeb 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.

Options dialog

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.

Build menu

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 vendor specificsThe result is the insertion of the missing vendor specific properties in the right order.

Missing vendor specific resultIf one or more of the vendor specific properties are already present, then only the missing ones are added.

Add missing standard property

Invoke the Smart Tag to automatically insert any missing standard properties.

Add missing standard

Keep vendor specifics in sync

HTML elements, classes and IDs

HTML element IntellisenseClass name IntellisenseID Intellisense

Hacks

Specific hacks can be used to target specific versions of IE on a selector level. These are all valid according to the W3C

Selector hacks

!important

Intellisense is now provided for !important.

!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.

Modernizr

Add region

Regions are supported in the VS2012 CSS editor, but now it’s even easier to add them.

Add regionChoosing Add region… result in this snippet being inserted.

Add region result

Custom fonts

Font face embedding

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.

Webkit scrollbar

Animation names

Animation name Intellisense

Inline URL picker

Just start typing and the file system shows up in Intellisense.

Url picker 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

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.

Color swatches

Font and image preview

Font previewImage preview

Validation

Browser selector

Control how validation and Intellisense behaves, based on the browsers you want to support.

Browser selectorJust right-click a CSS document and click “Select browsers…”. Note: The CSS document must be part of the open solution.

Best practices & Browser compatibility

Message window

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

Color converter

Sort properties

A Smart Tag on every selector enables you to easily sort all the properties within the rule.

Sort propertiesCSS sorting is open source. Find the code on GitHub

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.

base64 encode DataURIIf the base64 string becomes to long, you can easily collapse it.

Base64 encoding completeRemember to optimize your image files before embeding them. Use the 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.

JSHintThe error window updates as you type, so you don’t have to right-click the .js file to kick off JSHint. It happens as you write.

Each indiviual JavaScript file can override the global settings by using the official JSHint comment format descripted in the 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.

JavaScript regions

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.

Mustache/Handlebars/JsRender

Markdown

See the compiled markdown in a preview window inside Visual Studio.

The preview window shows the rendered HTML generated from the Markdown file.

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.

LESS preview

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.

LESS editor

Compiler settings

You can set all the compiler settings from Tools -> Options. They include:

  • Compile on save
  • Compile on build
  • 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 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.

CoffeeScript 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.

Introducing TypeScript – Microsoft’s new open source JS language

TypeScript is a language for application-scale JavaScript development.TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

http://www.typescriptlang.org/#Download

Starts from JavaScript, Ends with JavaScript

TypeScript starts from the syntax and semantics that millions of JavaScript developers know today. With TypeScript, you can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment.

Contribute

Read the specification in doc or pdf

Discuss and provide feedback on the language.

Play with the bits and file bugs.

Join the #typescript Twitter discussion and follow the CodePlex project.

Learn

Tutorial – Best way to get up to speed on TypeScript.

Forums – Great place to get help with using TypeScript.