New Badass Features in Visual Studio 11 for Front End Developers

Microsoft Visual Studio is my primary weapon of choice for web development and the new set of features coming in the next edition can only be explained as badass!

The first thing you’re going to notice is you can now single click (highlight) files from the solution explorer to open them. Quickly traverse files with the up and down arrow keys and watch the contents of each file flash in front of you as go. I’m actually surprised at how quick they seem to load. This is fantastic as I’ve always hated how you had to double click files and end up with a massive amount of tabs. If you’ve ever used xcode before, this now works in the exact same way.

I was pretty keen to start editing some CSS as this is the first edition that supports CSS3 right from the box. I’ve also read Microsoft rebuilt the entire css editor from scratch so I had high expectations. First off as expected the intellisense now has all the new CSS3 properties, in fact there is 250 of them. It was so nice to type “box” only to see intellisense suggest “box-shadow”. I wondered about some more trickier ones and typed a dash “-” and intellisense immediately responded with every mozilla extension under the sun.

Something even cooler is you can now type the first character of each word separated by hyphens to reveal a new awesome shortcut. For example a property like “border-top-color” can be selected by typing “btc”. When you type the colon it gets replaced with the full property name. Very cool.

One feature im really excited about is the new color picker widget. Done are the days of copying hex color values from photoshop. Now for example you just need to type “background-color:” and you are presented with this new color widget. Use the picker to select colors from anywhere on your screen. Want to drop the opacity? No problem, just adjust the opacity slider and watch the editor set an rgba value.

Poking around the Text Editor options for css you will notice there is a new checkbox for “Hierarchical indentation”. What this means is you will get indentations that relate to your hierarchical rules. You should already be coding in this fashion, however visual studio 11 now just makes it that much easier for you.

For those people that hate scrolling through long css files, there is something new for you too. Set regions in the css and you now have a collapasable block.

If you’re worrying about all the new CSS3 features and old browser support you can relax. Visual Studio 11 will allow you select the scheme for your project (CSS 1.0, 2.1 or 3.0).

For the javascript side of things, Im sorry to say it was also rebuilt but still functions much the same way. It is still frustratingly missing the dropdown at the top of the editor listing all the functions available in the file, much like the one you get when editing a cs file. The only good thing about it is it now supports ECMAScript 5 and regions. The rest of the javascript features is a long list of how well it integrates with Internet Explorer 10 and hell would have to freeze over before I start using that as my primary dev browser. Thankfully google chromes inspector is getting seriously cool and has me covered on that bases.

In summary Visual Studio 11 is going to help make you a more productive fed. The guys at Microsoft have made a remarkable tool and I gotta hand it to them. They make seriously crap browsers but I’m absolutely in love with this IDE.