Contact

Technology

Feb 11, 2013

New Visual Studio 2012 Features for Web Developers

Denis Stetsenko

Denis Stetsenko

Default image background

Visual Studio 2012 introduces a number of new and exciting capabilities for development on the latest platforms. In a previous blog post, I pointed out some of the top features for SharePoint Developers. In this post, we will review some of the new and improved features for Web Developers.

HTML5 Snippets and Other HTML Editor Improvements

HTML5 is here to stay and it includes more than 25 new semantic elements. VS 2010 already had IntelliSense support for these elements, but VS 2012 goes further by adding corresponding snippets, which make it fast and easy to write markup. HTML5 specification has just been finalized by the Worldwide Web Consortium (W3C) and is truly the “cornerstone of the Open Web Platform,” as W3C describes it; therefore, this improvement is very timely.

Visual Studio 2012 Smart Task showing Grid View Tasks in the Source View
Visual Studio 2012 Smart Task showing Grid View Tasks in the Source View

Figure 1 – HTML5 support and snippets

A new feature called Smart Tasks gives Developers access to the dialog boxes and wizards for complex properties in the Source View. Previously, this was only available in Design View.

Figure 2 – Smart Task showing GridView Tasks in the Source View

Another small, but much appreciated feature is automatic renaming of the matching tag when an opening or closing tag is renamed.

Visual Studio 2012 CSS3 IntelliSense for @media queries
Visual Studio 2012 CSS3 IntelliSense for @media queries

Figure 3 – Automatic renaming of matching opening/closing tag

Additional improvements include: HTML5 validator, WAI-ARIA support, ability to extract selected markup to a User Control, and IntelliSense in code nuggets.

CSS3 Support and other CSS Editor Improvements

CSS3 goes hand-in-hand with HTML5 and VS 2012 CSS Editor adds a number of improvements, such as IntelliSense, snippets, and custom regions shown in the screenshots below. IntelliSense is very nice and snippets are available for a number of common rules. Custom snippets can be added as well.

Figure 4 – CSS3 IntelliSense for @media queries

Visual Studio 2012 CSS custom regions
Visual Studio 2012 CSS custom regions

Figure 5 – CSS3 media snippet

Custom regions definitely help better organize and navigate stylesheets.

Figure 6 – CSS custom regions

To make it easier to support multiple browsers, VS 2012 includes IntelliSense and snippet support for vendor prefixes. Once you select a snippet, typing a value into one of the vendor-specific properties changes the same value in others.

Visual Studio 2012 CSS vendor-specific snippets
Visual Studio 2012 CSS vendor-specific snippets

Figure 7 – CSS vendor-specific prefixes

Figure 8 – CSS vendor-specific snippets

Even though a similar feature is also included in the Web Development extension for VS 2010, Color Picker is now built in. It allows you to select a color and even switches the standard HEX to RGBA when opacity is selected.

Visual Studio 2012 Page Inspector (click to enlarge)
Visual Studio 2012 Page Inspector (click to enlarge)

Figure 9 – CSS color picker

Other improvements include hierarchical indentation, title case searches, and CSS hacks support.

JavaScript Support

The JavaScript Editor in VS 2012 is brand new and supports ECMAScript 5. Some of the Code Editor features that ASP.NET Developers have been enjoying for a while via VS 2010 extensions, such as method outlining and brace matching, are now available out-of-the-box. You can also point your cursor on a function or variable name and hit “F12” to go directly to its definition! JavaScript and DOM IntelliSense have also been improved. For example, VSDoc now supports a new signature element for declaring JavaScript function overloads.

For more information about these and other JavaScript support improvements in VS 2012, please check back next week for a blog post by my colleague, Fernando Berrios.

Page Inspector

Finally, any Web Developer will agree that getting your markup compatible with all versions of the modern browsers is a time-consuming and frustrating task. Page Inspector is an attempt to put an end to this frustration. This new tool provides browser diagnostics right in the VS 2012 GUI with minimal setup. It’s very similar to the Developer Tools in IE9 or Chrome, yet you can modify your markup on the fly and see the instant result in Page Inspector. To run it, right-click on a page in Solution Explorer and choose “View in Page Inspector.”

Figure 10 – Page Inspector

Page Inspector out-of-the-box is somewhat limited, but you can tweak the web.config file to fully enable it in your project. For more information about Page Inspector and other new debugging features in VS 2012, please check back next week for a blog by my colleague, Austin Christenberry.

Compatibility with Visual Studio 2010 Projects and Solutions

That’s right – you can open any VS 2010 project/solution in VS 2012 and not break it for the rest of your team. Even though this is not necessarily a Web Developer feature, the notion of project sharing does open up new opportunities for project teams and is a much needed improvement.

Final Thoughts

Visual Studio 2012 provides a number of new and improved features that are guaranteed to make Web Developers more productive and turn any web development task into a fun activity. The development team in Redmond, WA also promises regular updates, which means Microsoft is aligning with the latest software development trends in the market, such as Agile methodology. Keeping its promise, the recently released Update 1 brings yet another batch of enhancements all across the board. I can’t wait to see what else is in the works for future updates!

If you have Visual Studio 2012 questions and/or looking for more great tips, please send a tweet to @CrederaMSFT. You can also check out other recent blogs on Visual Studio:

Conversation Icon

Contact Us

Ready to achieve your vision? We're here to help.

We'd love to start a conversation. Fill out the form and we'll connect you with the right person.

Searching for a new career?

View job openings