Improve Visual Studio with JQuery Intellisense and Code Outlining

Every .NET programmers is used to brace matching, code collapsing and Intellisense because Visual Studio got them from the beginning, I expect to have these helpers when I write jscript inside a cshtml file too.

Intellisense

For Intellisense in .js files add this:

index.js
/// <reference path="jquery-1.7.1-vsdoc.js" />
/// <reference path="jquery.validate-vsdoc.js" />

In order to enable JQuery Intellisense for Asp.NET MVC projects that are using Razor syntax, you’ll need to insert in every cshtml this piece of code:

Index.cshtml
@if (false)
{
    <script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
}

It’s important to add the script reference inside a If(false) clause, in this way at runtime your html code will not contain the vsdoc reference. After adding the code you’ll have Intellisense with comments support:

 

Notice that I am using the latest version of JQuery, in order to update your MVC project please follows the steps described in this post.

NuGet Package: JQuery

Better JScript Editor

On the Visual Studio Gallery website there is great plugin that will add outlining, brace matching, code collapsing, word highlighting and <para> tag support. You can install it via this link and you’ll benefit from these feature inside <script> areas.

Download: JScript Editor Extensions

If you want to use code regions inside .js files and have outlining like in C# editor (outlines {}s, []s and #region tags) get JSEnhancements, is the right tool and works alongside Microsoft JScript Editor Extensions.

Download: JSEnhancements

Visual Studio 11 will support ECMAScript 5 and many more IntelliSense improvements regarding javascript, for more details check this blog post  New JavaScript editing features for Web development in Visual Studio 11 Developer Preview.

Last update on: 10 February 2012