Developers are a picky bunch, almost to the point of superstition and voodoo magic, when it comes to their tools. If you take into account the countless number of things we use to build apps (Node, Grunt, Fiddler, LESS, EC2 etc.), it's no wonder why, once we find a nice combo, we guard it like a squirrel with his last nut. And it makes sense, since your development environment is pretty darn important to your success.
What I think makes Visual Studio a great IDE for web development is an extension called Web Essentials.
The one tool that, in my opinion, has always been an insanely personal and opinionated preference is your IDE or editor. Everything about it matters, from keystrokes and language support to plugins and themes. It all has to flow nicely within your development style, and most importantly, it needs to help you solve the problems you're facing without making you jump through hoops.
Visual Studio is one of the best IDEs available, easily incorporating a wealth of features that make developers very successful. But it hasn't really been looked at as a "web developer's" editor because it traditionally targeted the Microsoft platform with many features that made coding for that platform incredibly easy. And, well, many of those features didn't really apply to developers that weren't targeting a Microsoft platform.
With Microsoft wholeheartedly embracing HTML5, CSS3 and JavaScript for both web and Windows 8 app development, there's been a ton of changes with Visual Studio 2012 that make it an awesome tool for building for the web. This is what I plan on covering next, and hopefully you'll see it in a very different light.
Visual Studio for the Web – A Little History
One of the best features of the Solution Explorer is that I can search for a specific asset within the whole solution.
I remember looking at Visual Studio myself many years ago and not really taking it seriously. It wasn't because it wasn't a powerful IDE. It just felt squarely targeted at building .NET applications and sites--and in fact, it was. That's not a bad thing because if you ask any .NET developer, Visual Studio is the bees knees for their needs providing a rich editing environment with integrated capabilities that other editors simply don't have by default. And for those features that were missing, the extension ecosystem is as comprehensive as you'll find. So I could totally get why .NET developers love Visual Studio.
When it came to the web though, technologies such as HTML, CSS and JavaScript were an afterthought, basically second-class citizens. And jQuery support, which was especially important to me, was another thing that Visual Studio didn't support. Having integrated support for the basic, but critical, technologies and frameworks of the web was a key requirement and without them Visual Studio, for me, was DOA.
Thankfully, Microsoft made it clear that these technologies were incredibly important to their direction, and that kicked off a ton of updates that started to shape Visual Studio's path towards better support for web developers, especially front-end developers. This included support for HTML5, CSS3 and JavaScript as well as shipping jQuery with Visual Studio, all important updates that made me reconsider the IDE for web development when I joined Microsoft.
What's Baked In
One of the first things I did when I started using Visual Studio back in 2010 was to create a template based off of HTML5 Boilerplate. I did it because I felt Visual Studio's default templates didn't match what I wanted, and Boilerplate is pretty much to the goto template for most new files. This worked great for me because I tend to need to create a lot of one off proof-of-concept pages and having to create a full-blown project wouldn't be ideal.
Visual Studio 2012 now addresses this by allowing you to create a very simple HTML skeleton that's closer to what most web developers would want:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
This is done via a simple "File->New File" and choosing "HTML Page" from the template options. The same can be done for stylesheets or JavaScript files, although the templates are barebones.
This template is far less comprehensive than HTML5 Boilerplate, but the important thing to remember is that it's a non-Microsoft starting point (which is important for my web development).
And as I described in my blog post, you can create your own templates with extended features.
I know what you're saying: "Yeah that's cute Rey, but show us something more than an HTML skeleton." I'm getting there. Patience, grasshopper.
Managing a large amount of website code is where I think Visual Studio really shines. I downloaded Addy Osmani and Sindre Sorhus' TodoMVC framework project because it's a pretty big set of files to work with. To suck in the site, it's as simple as doing "File->Open Web Site…" and choosing a directory:
This gives me what's called a "Solution" which helps organize all of the assets for my website and displays them in a treeview style:
One of the best features of the Solution Explorer is that I can search for a specific asset within the whole solution. So if I wanted to find where jQuery is, I can just enter the term "jquery" and it'll return a listing of all directories and files matching it:
The editor itself has the features I expect from an IDE, with things as basic as line numbers and code collapse to the ability to actually work in a design mode and easily put your files in split screen mode. One thing that is a must-have for me is good code insight so that as I'm creating the code, I can have the attributes presented to me. It's hard enough to remember all of the programming languages' syntax, so a little helper to tell you the attributes is a Godsend. VS offers this via Intellisense which now supports HTML5, CSS3 and JavaScript.
So not only do I see the attributes that are available for an element, but it also shows me the methods that I can use. Notice that in this example, I'm getting Intellisense for the HTML5 video element. I'm not an advocate of inline code but the fact that it's there is still very useful.
CSS
For CSS,you still get the Intellisense which includes the full list of properties in addition to a description of what each does:
And once you've selected a property, it provides code hints to help you remember how to format your statements:
Of course, along with these features, VS has smart features to make tasks such as picking colors trivial:
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:
div#contentRegion.address
I'll get the following code:
<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.
Comments