Tuesday, 24 November 2015

Enable Intellisense for JavaScript Libraries (e.g., JQuery, AngularJS) in ASP.NET

IntelliSense has become an integral part in programming. It goes hand in hand with .NET because Visual Studio has ability to use reflection to retrieve all the information from the references that you have provided. If you start typing and IntelliSense has no suggestions you’ll immediately realize there is something wrong.

So why not have Intellisense for JavaScript Libraries?

Follow the following steps to enable Intellisense for JavaScript Libraries in your ASP.NET project:
  • Create a folder named “Scripts” in root.
  • Right Click on it => Add => Add New Item => JavaScript File with name “_reference.js”
Note: This file must (by default) be located in a folder at the root called /scripts/. That's the naming convention. Any file located at /Scripts/_references.js is automatically added to global Intellisense.
The file “_reference.js” will contain nothing but just a bunch of references. This is also the only file that is included in the intellisense all the time.
As you can see we have added references for AnjularJS and JQuery. Similarly you can add for any other JavaScript library. Path should be the path of JavaScript library.
Now you might be wondering what is first line.

/// <autosync enabled="true"/>

JavaScript files are added, deleted and renamed all the time, so it's very easy to forget to update the _references.js file accordingly. A better approach was to add a feature that would do that automatically and thereby give Intellisense for all .js files globally all the time.

This new auto-sync comment is all it takes to enable automatic synchronization of triple-slash references. Whenever a .js file is added, renamed, moved or deleted, the _references.js file is automatically updated to reflect the changes.

That’s it. Now just focus on logic to be implemented, intellisense will handle rest.

No comments:

Post a Comment