Visual Studio 2012 and it’s extensions ecosystem brings excited enhancements for web developers. I am glad to see that web platform team is giving attention to open source, adapting industry trend faster than ever and making developer life easy and standard-complaint.
In this post I am going to share some of web development goodies that ships with Visual Studio 2012 (including Visual Studio Update 1 along with ASP.NET and Web Tools 2012.2 RC update) as well as some popular and must have extensions. HTML5/CSS3/JavaScript Editor Enhancement Support:
The Visual Studio 2012 IDE includes great tooling update for supporting HTML5/CSS3/JavaScript intellisense. This includes new HTML5 tags and CSS3 properties. This helps in writing code relatively faster.
And who said to work on color hex codes? CSS color picker is now supported directly in CSS editor in Visual Studio. Makes it super easy to select and customize colors.
Further, JavaScript editor has improved significantly supporting better intellisense including for jQuery library.
An important point for JavaScript intellisense is to add reference path to js files. If you have noticed in ASP.NET MVC 4 project templates there is a js file “_references.js”
This file add references of common scripts referred in project to support their intellisense. However the reference to “_references.js” is added as global references in Visual Studio -> Options -> Text Editor -> JavaScript -> Intellisense -> References
It’s not the case that you cannot develop HTML5/CSS3 application without it. It’s just a editor support. Part of the features were also made available for Visual Studio 2010 SP1.
Page Inspector:
Page Inspector is a new feature in Visual Studio 2012. If you have developed web layout using HTML/CSS, you must have came across situation to give hit and try web layout for example, setting the right position, padding, selecting the color and see what best suited. I previously used to do this using FireBug, a Firefox browser extension. Page Inspector one feature is to answer this scenario. Scott Hanselman has produced a great animation to show what page inspector does. So I have copied it below.
Paste JSON as Classes
A new feature to convert JSON into classes. A copied JSON can be pasted using Edit -> Paste Special -> Paste JSON As Classes
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
is pasted as
NuGet
NuGet is a popular extension of Visual Studio that makes it easy to manage third party libraries and dependencies in Visual Studio. In fact it’s so good that it now ships with Visual Studio 2012.
You can open up NuGet Package Manager using user interface or Package Manager console window available in View -> Other Windows -> Package Manager Console.
The way it works is that if you develop third party libraries and want to share with other developers then you create a package in NuGet. Other developers can retrieve package from NuGet repository and download the library along with required configuration, such as entry in web.config. See an example blog post, where I demonstrated configuring ELMAH using NuGet.
Web Essentials
If you are currently working on web application front-end in VS and you don’t have web essential extension installed then you are simply missing something essential. Web Essential is an visual studio extension created by Mads Kristensen and its like playground for the web tools team. It has a bunch of great features which provide help in development, I am just going to highlight few of them. Complete feature set is explained at http://vswebessentials.com/
LESS Editor/Preview: LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you write CSS and don’t know about LESS, you are missing something really handy. Web essential extension supports .less extensions file in a way that it previews the output CSS and some refactoring as well.
Vendor Specifics Generation: Many of the CSS3 properties required vendor specifics properties to work across web browsers. These include -moz, -webkit, -ms and -o. Consider following example below:
would result in:
There are many other goodies for web developers, TypeScript, CoffeeScript, advance intellisense in HTML, JS and CSS editors, ZenCoding etc. Go get it. This extension is also available for Visual Studio 2010 as well.
Productivity Power Tools
Productivity Power Tools is another must have extension of Visual Studio developed by some engineers at Microsoft Visual Studio team but they are not yet part of the Visual Studio official shipment. Some of the feature has graduated to official shipment over the time yet there are many good to have feature in productivity power tools. Some of the features I like are:
- Ctrl + Click for Go To Definition
- Remove unused Using from code editor context menu
- Power Commands
- Quick Tasks. Quick Tasks is nothing revolutionary rather it brings out most commonly used settings in Visual Studio to your finger tips. (see snapshot below)
For details, check out the Productivity Power Tools page on Visual Studio Gallery. This extension is also available for Visual Studio 2010 having relatively different feature set.
Open Source Web Platform
Over the last two years, I am glad to see the interest and shift of Microsoft Web and Azure team towards open source. Since then they have started publishing some of their source code on codeplex and github. This really helps developer community in contributing towards frameworks and understanding code which is good to have in case you faced any issue and wanted to know internals.
That is all for now. I have tried to highlighted some of good stuff available in Visual Studio ecosystem, which are helpful for web developers. I recommend you to check out details of each item.
Happy Coding!
6 Comments
Usama Wahab Khan · January 30, 2013 at 12:34 pm
nice post
Steven Smith · March 31, 2013 at 5:08 am
This article is very good & informative.I have gain so much information from this blog.I like your blog.Thanks for the post.
Website Designer Company
Website Development · September 4, 2013 at 1:05 pm
Thanks for sharing this great piece of information. Do keep us update with some more great information…..Website Development Companies in India
Mohamed Shiyas · January 21, 2015 at 6:21 am
Thanks
for sharing informative post about Microsoft Visual Studio. This platform is
used to create web application and services. Being widely used software
framework, this domain offer huge career opportunity for trained professionals.
We at, Dot
Net Training in Chennai offer hands on training in this evergreen
technology.
Fahim Zada · June 29, 2015 at 12:41 pm
Online girls chat rooms join for free no registration needed 🙂
Chat Rooms
Asian girls chat rooms
A new focus on mobile development | Adil's Tech Weblog · November 10, 2013 at 2:06 am
[…] working web because of web working model and it’s fast paced in terms of improvement plus web development tools have improved over the time, one way to realize fast paced web is by considering that Firefox has released more than 15 version […]