Visual Studio: Web Dev Bliss-Part2

JavaScript

JavaScript and the DOM also received love in Visual Studio, with it being a first-class language in the IDE; no more plugins to make it usable. Again, focusing on Intellisense, VS offers full support for JavaScript and DOM objects, methods and properties:

jQuery support has been included for some time now, and Intellisense support to for other popular frameworks can be found throughout the Internet. And Visual Studio 2012 now ships with jQuery Mobile to allow developers to build mobile sites.

Debugging

Here's something you may not have known. Visual Studio allows you to not only test against every major browser you have installed on your system but it also provides a tool called Page Inspector which is similar to the web debugging tools found in most browsers. With Page Inspector, you can see your page in real-time and make live changes to CSS and the DOM. Once you're satisfied with these changes, you can save them back to your source files. For example, notice how I've changed the text of the tweet in the following screenshot by updating it within the markup:

The obvious benefit of this is that you don't need to drop out of your editor to test out your page and make changes. And since the changes are happening live, it's a simple matter of taking the affected code and pasting back into your source code. This is possible because Visual Studio leverages Internet Explorer's Trident rendering engine as well as a built-in version of Internet Information Server (IIS) to allow you to run your site dynamically. That's right, Visual Studio ships with a web server (and it has for some time).

Making VS Better – Web Essentials

Those are no doubt useful features, but a web developer's workflow is more complex than just editing a couple of pages or CSS styles. And honestly, many of the features are available to code editors, albeit via community plugins.

Visual Studio has made JavaScript a first-class language.

What I think makes Visual Studio a great IDE for web development is an extension called Web Essentials. It's the missing piece of an otherwise solid coding environment because it adds a number of features that are essential. This extension extends Visual Studio by supporting features like:

• Bundling of files for future processing
• Minification of assets
  *JSHint support for linting of your JavaScript code
• Top client-side templating engines including Handlebars, Mustache and JSRender
• The LESS stylesheet language with on-the-fly previewing
• CoffeeScript and TypeScript

And there's so much more. Mads Kristensen, the creator of Web Essentials, has done a stellar job of distilling what web developers are using and bringing that into the extension.

For example, ensuring browser compatibility is a critical part of our jobs, but with so many properties out there to remember, it can be a bit daunting to remember what works where. Web Essentials helps by allowing you to see the level of browser support for CSS properties:

And to take it a step further, it will even tell you when you're missing vendor prefixes, an important consideration to ensuring your site works across all major browsers:

As well as allow you to insert the vendor prefixes based on your own target browser preferences:

While this will only add the missing vendor prefixes for this specific property, Web Essentials includes the capability to do it page wide and can also add in the missing non-prefixed version of the property to help future-proof your code.

Since we're talking about browser support, having to support older versions of IE is a bit of a drag, and remembering all of the hacks needed to make a page render well is impossible. Yep, Web Essentials offers the ability to put in specific hacks to make your pages work right:

The skull and cross bones are pretty appropriate.

CSS preprocessors are all the rage and rightfully so. The ability to make variable declarations and create mixins in CSS is a huge benefit, especially when managing large stylesheets. LESS is one of the most popular solutions. In fact, I did a survey in which LESS was one of the most popular frameworks in use. Web Essentials brings LESS to Visual Studio so that, as you write, you can view the CSS output in real-time, via a preview window:

The preview window, along with full editor support and the ability to set compiler options, is a boon to developers who want to use Visual Studio and need LESS support.

I've only scratched the surface of Web Essentials CSS features. There's just so much richness in there for this one article.

Enhanced JavaScript Support

Visual Studio is one of the best IDEs available.

As I mentioned, Visual Studio has made JavaScript a first-class language. Some critical workflow needs are missing however, and Web Essentials fills those. For example, every developer should be linting their JavaScript code. It's just good practice and helps prevent common language errors. JSHint is a very popular fork of JSLint created by Anton Kovalyov and is used extensively by developers for analyzing their code for potential problems. Web Essentials includes JSHint, allowing you to lint your code at any time. It can also be configured to lint all your code at build time.

Since I mentioned build time, Web Essentials also includes the ability to minify your files at any time. But it takes it a step further by updating minified files when the original source file is updated, and it also creates a source map to help in debugging later on.

Many developers like using domain specific languages like CoffeeScript and TypeScript. For some, the opinionated language of CoffeeScript makes it extremely attractive compared to coding in plain ole JavaScript. Well, those developers can be opinionated in VS thanks to Web Essentials. Mads has added support for both DSLs, adding similar preview support that I mentioned previously about LESS. As you type on your TypeScript or CoffeeScript code, you can see the resulting JavaScript in real-time. And once you're all set, Web Essentials can minify the code for you:

HTML Goodness

Mads added neat HTML features as well. If you're into Zen Coding (I've always found it a little odd), then Web Essentials' got you covered. If I type this into VS and hit the Tab key:

1	div#contentRegion.address

I'll get the following code:

1	<div id="contentRegion" class="address"></div>

That's very cool. Not my cup of tea but cool nonetheless.

And while he was in there, he added support for client-side templating engines like Handlebars & JSRender, Markdown and a Lorem Ipsum generator.

I'm really beginning to wonder if Mads sleeps.

Wrapping Things Up

I hope I've shown that Visual Studio on its own has really great support for HTML, CSS and JavaScript. The team at Microsoft has worked hard to make it a world-class IDE for web developers. For me, the essential piece that makes it my choice for web development is the Web Essentials extension. It provides me with that extra bit of functionality I need to manage my workflow. Sure, every developer has different needs and I'm not professing to have addressed all of yours. I do hope, though, that I've outlined and demonstrated enough great features to show that VS is more than capable for web development.