Editing JavaScript Using Visual Studio .NET

Mark Wagner
Castle Rock Software, LLC

December 22, 2004

Summary: Use the Visual Studio .NET development environment as your JavaScript editor.

Technologies and Tools

  • JavaScript
  • Visual Studio .NET

As a .NET developer, I have become very comfortable with the Visual Studio .NET development environment.  As a result of my profession I spend most of my time working with this application.  I have recently increased my use of JavaScript and wanted an easy-to-use editor that wouldn’t take long for me to become productive using.  I have debugged JavaScript with .NET on and off for a while now, but never did I really need to work solely with JavaScript.  Usually, I am working within the context of an ASP.NET sever-side project.

The purpose of a scripting language such as JavaScript, is to provide a flexible, forgiving language to accomplish relatively simple code logic.  My primary intent was simply to use Visual Studio .NET as my JavaScript editor in order to take advantage of the built-in Intellisense and debugging it provides; and I am very comfortable with VS .NET and liked the idea of having a single development environment.  A significant portion of my testing and debugging will take place within the browser (Internet Explorer, Netscape, and others), but Visual Studio does have a few nice tools that can be used to debug such as the watch window.

Creating a new JavaScript ProjectI begin by creating a new “JavaScript” project by selecting the File > New > Project menu option.  I happen to use C# when I code, so I selected the C# Projects folder; however, you could just as easily select the Visual Basic Projects.  Once you have selected your folder, select the Empty Web Project icon and then specify the name of your project.  In the sample below my project name is MyJavaScriptProject.  This will create a simple web project with no files in it.

jsEditorSampleNewProject

Next, I add a new HTML page to my project.  Below is a sample of my simple completed HTML page.  When you add your HTML page, it will be empty compared to my example below.  As you inspect the HTML code below you will find it is a very simple HTML page with mostly javascript code contained within script tags.  Keep in mind, you can edit javascript (.js files) files as well.  However, since javascript files do not have a context by themselves, you will not get the full Intellisense available.  This is because the JavaScript code in the .js files is not within the context of an HTML document.  For example, you will not get the document object within your Intellisense.  Although you can still code using the document object, I like having the Intellisense available.  At least for now.

jsEditorSampleHTML

Quick NoteMake sure you allow (enable/disable) the JavaScript debugging in your Internet Explorer options.  These are usually in the Advanced section.  This will allow any JavaScript errors that occur while you test in your Internet Explorer browser to attach to your Visual Studio .NET debugging environment.

IntellisenseThe Visual Studio .NET HTML editor will provide Intellisense.  The use of Intellisense plays a major factor in my productivity.  Without it, I find myself digging through online help and books much more than I would like.  Even better, Visual Studio .NET provides Intellisense for the browser you want.  You do this by setting the targetSchema property of the HTML document in the properties dialog.  Below you can see the available schemas to chose from.  I find myself switching between Internet Explorer 5.0 and Netscape Navigator 4.0 options.  This allows me to easily use Intellisense when creating browser specific javascript code. 

Changing this targetSchema property tells the Visual Studio .NET editor what browser I would like my Intellisense to be compatible with.  When testing javascript code specific to Netscape I select the Netscape Navigator 4.0 option.  Then for example, when I type the javascript keyword/object document followed by the usual dot (period), I get the Intellisense populated with all the Netscape Navigator 4.0 compliant properties and methods.  The same is true when I select the Internet Explorer 5.0 option.

An important point to remember is that JavaScript is not strongly typed.  Because of this, the Visual Studio .NET editor cannot provide Intellisense for your JavaScript variables and functions.  However, your declared var-iables will appear, which is kinda nice.  I am not familiar with any of the other more popular JavaScript editors.  I expect they may try to perform some sort of design-time variable typing via reflection.  That would be purely a guess on the editors part, yet while keeping this point in mind, any help an editor provides is of benefit to the developer.

  jsEditorSampleTargetSchema

Testing My JavaScriptI can test my “JavaScript” project using the Start Without Debugging menu option, or Ctrl+F5.  This may be more of a convenience than a necessity.  Alternatively, I could simply open my test browser (IE, NS, Firefox, etc.) and point the url to my local project.  I typically just press the Ctrl+F5 keys.  Also, don’t forget to set the default page for your project to your HTML page first.

jsEditorSampleStartWithouDebugMenu

Conclusion

My appreciation for JavaScript continues to grow.  This is especially true as the standardization and functionality continues to improve between Internet Explorer, Netscape Navigator, and now Firefox.  I will admit that Visual Studio .NET is probably not the best JavaScript editor available.  However, it is much better than using a simple text editor, which is often done.  I have not taken the time to look into editors and debuggers for JavaScript.  I expect they provide more for the JavaScript developer since that is what they are specifically designed for.  I have personally not felt the need to dedicate time in learning the “best of’s” for each JavaScript editor available.  However, I would appreciate recommendations or suggestions you may have.

Advertisements

One thought on “Editing JavaScript Using Visual Studio .NET

  1. (Migrated Comments from my old blog)
    Feedback (Migrated)

    # re: Editing JavaScript Using Visual Studio .NET 2/24/2005 12:44 PM Malcolm Pollack
    Thanks — I’ve been writing C++ and C# code using Visual Studio (first 6, then .Net) for years, and was looking for some environment that would give me all the support that I’ve become used to.

    Glad I found your article.

    # re: Editing JavaScript Using Visual Studio .NET 5/2/2005 11:22 PM pavithra
    very good explanation to understand the message.

    # re: Editing JavaScript Using Visual Studio .NET 6/2/2005 9:00 PM ladwi
    I Love you! and I Love Microsoft and I love VS.NET

    # re: Editing JavaScript Using Visual Studio .NET 7/7/2005 5:28 PM Hands
    I’m also glad I found this nice article.

    # Debuging JavaScript in Visual Studio .NET 8/10/2005 11:17 AM The Urban Camel’s Blog

    # Debuging JavaScript in Visual Studio .NET 8/10/2005 11:26 AM The Urban Camel’s Blog

    # re: Editing JavaScript Using Visual Studio .NET 9/14/2005 11:02 PM Scott
    Thanks for pointing out the context issue. I had wondered how to get a .js file to give me DOM intellisense. In fact, my google query was:

    “visual studio” edit javascript dom intellisense explorer

    Your explanation cleared it right up! Thanks for a great article.

    # re: Editing JavaScript Using Visual Studio .NET 5/3/2006 2:26 PM Guru Pahwa
    Greate article

    # re: Editing JavaScript Using Visual Studio .NET 5/23/2006 5:11 PM Gustavo
    This article came up as the first hit for “visual studio javascript intellisense” using http://www.google.com.

    Thanks
    –Gustavo

    # re: Editing JavaScript Using Visual Studio .NET 7/10/2006 10:04 PM Ehsan
    Many many thanks Mark for this beautiful article

    # re: Editing JavaScript Using Visual Studio .NET 10/3/2006 8:51 PM Jacob DuBray
    Great article to help people out Mark. We at Fresh Logic use VS 2005 for all our web 2.0 projects because it’s great support for JavaScript, XHTML, and CSS.

    Something that might also help all the C# developers out there who shy away from javascript is out “Scripts” framework we just released. It’s an object oriented JavaScript framework with a programming model similar to the Microsoft .NET Framework. So a transition from C# to javascript is a little less painful. You can download it at http://scripts.freshlogicstudios.com

    # re: Editing JavaScript Using Visual Studio .NET 10/27/2006 12:38 PM Abdullah Dogan
    At first, I thought that there was a configuration i missed to check in VS for javascript support. Your article is so helpful for me.
    Thanks for the advise.

    # But what about single javascript scenario? 11/9/2006 5:54 AM Uri
    But how I can edit and debug single JavaScript scenario?

    # re: Editing JavaScript Using Visual Studio .NET 11/14/2006 4:06 PM mark
    One of the things in vs2006 I found a help was to install the script explorer in the debug menu/windows. In order to do this, from the tools menu select import and export settings and then import the web settings. It was a great help to see what scripts were running on a page and the ability to set break points and such.

    Mark at 4/26/2007 1:25 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s