Wednesday, May 25, 2011

SharePoint 2010 ECMAScript/Javascript IntelliSense in Visual Studio 2010

Visual studio 2010 provides great IntelliSense for .Net. But for JavaScript and ECMAScript its required some configuration like adding some references.
We need to reference the debug files in our JS library in Visual Studio.  Simply type the following four lines at the top of our JS library.
JS File:
/// <reference name="MicrosoftAjax.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.core.debug.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.debug.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.Runtime.Debug.js" />

Application Page:
<% #if SOME_UNDEFINED_CONSTANT %>
<script type="text/ecmascript" src="/_layouts/SP.core.debug.js " />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />
<% #endif %>
Note: by using an undefined constant, Visual Studio will provide IntelliSense while the <script> element is omitted from the actual page rendering
Important Note: Use for Development Purpose only, remove these statements when going for production environment deployment.
Hint: If it’s not appearing, press CTRL + Shift + J together to update Jscript IntelliSense.
You can add different debug js files reference and you will find it in LAYOUTS or ISAPI folder of SharePoint 14 Hive.
For more information you can refer this MSDN Articles:

1.       Here is the official documentation by Microsoft on how to enable IntelliSense for the ECMAScript object model - How to: Enable ECMA Client Object Model IntelliSense in Visual Studio 2010
2.       This will get you most of the IntelliSense that you care about. If something looks like its missing… you will get a list for the appropriate ones by class/namespace can be found here - ECMAScript Class Library - SharePoint 2010
Screen Cast:
Search debug.js files in 14 Hive


No comments:

Post a Comment