Javascript Intellisense Enhancements in VS 2010

Original author: Scott Gu
  • Transfer

This is the twentieth article in the series that I dedicated to the release of VS 2010 and .NET 4.

Today's post covers some of the great improvements that are coming to Intellisense for VS 2010 and the free Visual Web Developer 2010 Express for JavaScript. It has become faster to load with large script files and supports the completion of expressions for even more scenarios compared to previous versions of Visual Studio.

Intellisense JavaScript Enhancements


It's much harder to provide Intellisense support for a dynamic language like JavaScript than for strongly typed languages ​​like C # and VB. It is impossible to correctly evaluate the form and structure of variables, methods, etc. without pseudo-launching the code itself, as JavaScript is very flexible and can dynamically modify these objects.

The JavaScript code editor in VS 2010 is now endowed with “intelligence”, which allows you to execute pseudo-code as you type, so intellisense remains accurate when auto-completing. Below is a simplified overview of how rich and flexible new functionality is in the final version.

Scenario # 1: Basic Type Assessment


When you declare a variable in JavaScript, you do not need to specify a data type. The type is determined by the bound value. Since VS 2010 pseudo-runs code in an editor, it dynamically determines the type of variable and provides intellisense specific to the code, based on the assigned value of the variable.

For example, notice how VS 2010 provides a list of additions for a string (we assigned a string value “foo” to a variable) If we later set it to a numeric value, the list of assumptions will automatically change and accordingly will give out objects for working with numbers:

image



image

Scenario # 2: Intellisense while manipulating browser objects


A fairly common action in JavaScript is working with the DOM page, as well as working with browser objects available on the client.

Previous versions of Visual Studio also had intellisense support with standard browser objects, but it did not provide assistance with more sophisticated scripts (creating dynamic variables and methods). Pseudo code execution in the VS 2010 editor allows us to get rich intellisense for a wider range of scenarios.

For example, below we use the browser window object to create a global variable called “bar”. Pay attention to what we get from intellisense when we want to use a variable after its declaration:

image

When we assign a “bar” variable a numerical value instead of a string, the intellisense engine in VS 2010 correctly determines its type and modifies the list of sentences for working with a number:

image

Scenario 3: Show must go on


Due to the pseudo-launch of the code in the VS 2010 editor, you have the ability to process various scripts and intellisense will always work.

For example, below we use a for loop and a browser object window to dynamically create and name several dynamic variables (bar1, bar2, bar3 ... bar9). Note that the editor intellisense engine defines and provides a list of assumptions for them too: Since the variables are added to the browser window object they are also global, they are displayed in the list of global intellisense variables:

image



image

Did not you forget? Type determination is still supported. So, if we assign a string to a dynamic variable, we get a list for working with the string, if it is a number, the type will also change to numeric.

And now for fun, let's make the for loop assign the string to the variables if the counter is even (bar2, bar4, bar6) and numbers, if the counter is odd (bar1, bar3, bar5): And here intellisense didn’t fail and it displayed everything correctly for the string variable “bar2” and “bar1” further:

image



image

Although this example is far-fetched, creating variables, methods, and event handlers on the fly is common in many JavaScript libraries. Many popular libraries use packaging techniques that make the script as small as possible. VS 2010 supports parsing and pseudo-launching of libraries that take this approach to script packaging, giving you enhanced Intellisense support right out of the box.

Summary


Now Visual Studio 2010, including the free Visual Web Developer 2010 Express, provides richer intellisense support in JavaScript. All this works with most popular JavaScript libraries and should help facilitate the development of client-side JavaScript code and AJAX scripts in your ASP.NET applications.

Also popular now: