September 27, 2012 07:26 by
Scott
Visual Studio over the years has provided very good support for the core application development languages like C#, VB, etc. But when it comes to web development languages like javascript and CSS, Visual Studio lacked some main support such as intellisense, debugging, etc. This article discusses some key features introduced in Visual Studio 11 with respect to Javascript and CSS.
Javascript
In this section we will look at some important and useful features that the Visual Studio 11 JavaScript editor provides.
Intellisense, Type Inference & Documentation
Prior versions of Visual Studio were a pain for Javascript developers due to the lack of intellisense for Javascript. The intellisense provided was very basic; developers had to be very sure of the method and class names, including the casing. Now Visual Studio 11 provides complete intellisense support for all the javascript objects and its methods. Fig below is a sample intellisense menu and you can see the number of options.
Visual Studio 11 also provides rich intellisense support for popular third party Javascript libraries like JQuery. Since Jquery is used by almost all web developers this will be of tremendous help to them. Fig below shows a sample intellisense available for JQuery in the Visual Studio 11 IDE.
In the above screenshot you would have noticed documentation for the method in the intellisense window like C# code. You could provide the documentation for your Javascript method as shown in the below example.
< script type="text/javascript">
function DoSummation(a, b) {
/// <summary>
/// Returns the sum of the variables a and b
/// </summary>
/// <param name="a" type="int">Integer variable 1</param>
/// <param name="b" type="int">Integer variable 2</param>
return a + b;
}
</script>
The Javascript editor also performs type inference, for example if a Javascript variable is assigned with a string value and later when the variable is used then the intellisense displays only the string related methods.
Curly Brace and Bracket Matching
When I use to write a large amount of Javascript code, especially with object oriented Javascript or jQuery, I used to get confused with the brackets and curly braces on their scopes. It may sometimes be a nightmare for developers to fix a brace mismatch on a huge Javascript code file. Fig below shows how the bracket scopes are highlighted by Visual Studio 11.
Go to Definition Feature
Like the C# Visual Studio editor of Visual Studio, now the Javascript editor also provides the Go to definition feature, which will be very useful in going through the code flow or to debug a Javascript issue especially when there are a lot of files involved and the method calls are scattered. In order to make this feature work you need to add the reference path of the .js file containing the method implementation onto the caller .js file. Below is a sample.
/// <reference path="File1HavingImplementation.js" />
A generic approach to provide the reference path is to add them to the _references.js file.
Debugging
There is a new window added to Visual Studio 11 called the Javascript Console, which provides various features in terms of debuggingJjavascript code. I will cover this topic in a separate article.
CSS
In this article we will take a look at two important features on the CSS front.
Code Snippets and Writing Vendor Specific CSS
One of the most repetitive and boring tasks for the UI developer is to write the vendor specific styles in a CSS file. Vendor specific CSS is nothing but writing the same style with different names as supported by different browsers in order to get the style working on multiple browser combinations. Now Visual Studio 11 provides CSS code snippets, for example type transform and hitting tab would create the different vendor specific properties for transform in a CSS class. Below is the generated CSS class.
.MyClass
{
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
Color Picker
One thing that bothered me while writing CSS classes is providing the color code. I had to use some external utility to figure out the color code of the color being used, which I was trying to create a style for. Now with Visual Studio 11 the UI designer doesn’t have to move away from the CSS editor to pick the color, the editor itself has the color picker integrated. Fig below shows the screenshot of the color picker on a CSS file.
I hope these features have simplified and provided solutions for some long lasting issues faced by web developers.
Happy reading!