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

7 Responses to Improve Visual Studio with JQuery Intellisense and Code Outlining
  1. Yuri Reply

    Downloaded and using JSEnhancements at work and home.
    Makes JQuery development much better. No need to count brackets anymore.
    One more thing I noticed: there is a small lug between keyboard press and char appears in the VS, but convenience of use outwaits it

  2. [...] the world: Visual Studio.  Visual Studio can validate your HTLM5 and CSS3 code, can help you with JQuer... stefanprodan.eu/2011/09/front-end-developer-specs
  3. alvin Reply

    Where do you get the vsdoc.js from?

  4. Hanuman Reply

    code outlining using Regions is not working for me. What is the correct syntax for using that?

    • stefan Reply

      //#region Region Name

      //#endregion

  5. [...] world: Visual Studio.  Visual Studio can validate your HTLM5 and CSS3 code, can help you with JQuery ... codingspring.com/?p=877

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>