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 tocreate 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:
01
02
03
04
05
06
07
08
09
10
11
| <!DOCTYPE html><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:
No comments:
Post a Comment