Wednesday, September 23, 2009

How to get Javascript Intellisense in VS 2008

I like to have JavaScript IntelliSense in Visual Studio. Using the ~ has not worked though. With permission of my friend, I am putting the email thread for later reference.

From: Stephen Walther
Sent: Wednesday, September 23, 2009 7:43 AM
To: Meacham, Samuel @ Tempe
Subject: RE: Javascript include problem that could easily be fixed for .NET 4.0

Hi Sam,

My favorite method of handling this issue is to use the Page.ResolveUrl method in the master page like:

<%= ResolveUrl( “~/Scripts/MyScript.js” ) %>

The ResolveUrl() method replaces the tilde ~ with the name of your application so that you can move your website without breaking the paths.

Another approach to solving this problem is to use the server ScriptManager (which also resolves the tilde ~ automatically) like this:

<asp:ScriptManager id="sm" runat="Server">


<asp:ScriptReference Path="~/JScript1.js" />



I agree that it is a little inconsistent that the <head runat=”server”> control resolves the tilde ~ for <link> tags but not other tags like <img> and <script>. But, you always have the option of using ResolveUrl in the <head> tag.

-- Stephen

From: Scott Guthrie
Sent: Tuesday, September 22, 2009 12:56 PM
To: Meacham, Samuel @ Tempe; Stephen Walther
Subject: RE: Javascript include problem that could easily be fixed for .NET 4.0

Stephen – any thoughts on this?



From: Meacham, Samuel @ Tempe
Sent: Tuesday, September 22, 2009 12:40 PM
To: Scott Guthrie
Subject: Javascript include problem that could easily be fixed for .NET 4.0

Sorry for emailing directly, but the art of feature requests and suggestions, while obviously important to both producers and consumers, has always been a dark one. I’m never sure where the appropriate forum is to make sure my idea gets read.

Master pages are great, and solved a lot of problems, like making sure the same css document gets included in every page in your whole app.

Having this in the master page:

<head runat="server">

<link rel="stylesheet" type="text/css" href="~/css/default.css" />

Renders this for a page at the app’s root:

<link rel="stylesheet" type="text/css" href="css/ErrorLoggerStyle.css" />

And this for a page in a subdirectory of the root:

<link rel="stylesheet" type="text/css" href="../css/ErrorLoggerStyle.css" />

Basically, the magic ~ solves all your problems. This doesn’t work for <script> tags, which leaves me 3 choices:

· Absolute URLs (“http://...”)

· URLs relative to the domain root (“/css/file.css”)

· URLs relative to the current directory (“css/file.css”, no leading “/”).

Obviously, each method has it’s pros and cons. With completely absolute URLs, the files will always be found (as long as they are there), but this doesn’t work well when you have multiple deployments, such as production, staging, and development, that require different versions of js files. Relative URLs fail when you have web content pages in subdirectories that use master pages in the app’s root (all of the paths break). URLs relative to the domain root (“/css/file.css”) don’t work when you don’t (or can’t) know the name of the app virtual directory, or if it changes depending on which deployment of the site you’re using (“” vs “”).

Our solution here has been to put an <asp:Literal> in the <head> element, and the master page’s Page_Load() writes all the <script> tags to that literal element at runtime, with the paths properly processed. We could probably create a UserControl that did the same thing, but the end result would be the same: No js intellisense at design time.

None of the above options are particularly appealing. Do you think it’s a possibility to have VS2010/.NET 4.0 support the ~ for <script src=”~/js/file.js”>? It would solve a lot of headaches for a lot of people…

Sam Meacham

It is nice to see such prompt response from a software development team. Here are some other helpful hints.

If you are updating the documentation of your JavaScript functions you may use the Update JScript IntelliSense command (Ctrl+Shift+J) from the Edit/Intellisense menu.

Using Javascript in a User Control can be problematic since you don't know where in the file structure it may be used. The following code will enable JavaScript Intellisense at design time. The "if (false)" will ensure it is not run in the browser.

<% if (false) { %>

<script language="javascript" type="text/javascript" src="../js/util.js"></script>

<% } %>

No comments: