Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!


During the last week of talking to quite a few Web developers at DevConnections who are doing JavaScript development and during my jQuery and WCF REST talks, a recurring question kept popping up. Why isn't there some way to get a list of functions in the Visual Studio JavaScript editor like in the other languages?

This is a fairly vital feature of a code editor, especially once you start writing a lot more client centric applications that have a fair bit of callback code that is maintained on the client. In fact, the question came up because I was scrolling rapidly over large amounts of code in several demos - or using trusty old CTRL-F - to jump to a given function in the code. In a demo that's annoying as heck, but it's also a problem during day to day development when you're working with more than a few JavaScript functions in a source .js file; client side code accumulates fast, even if you do little more than handle a few client side callbacks.

C# and VB both have class and member drop downs at the top of the code editor:

CSharpFunctionDropDown

There are also document outlines for the HTML and CSS editors, class editors for C# and VB,  but unfortunately there's nothing along these lines available in the Visual Studio JavaScript editor.

I've begged for this feature for a while and it's always been declined as a low priority issue, which I find surprising because to me at least it's pretty high on the productivity list.

I realize that JavaScript parsing and displaying reliable class information is a pretty difficult process. JavaScript's Function based Closure/Class model makes it pretty difficult to figure out exactly what constitutes a function and what constitutes a class. The same issue also applies to the JavaScript Intellisense in Visual Studio which - although pretty good - also misses quite a few scenarios for finding embedded functions and classes and so often provides incomplete information.

There are alternatives though. I've been using Aptana off and on and it does support function and class outlining:

Aptana

As nice as the class view is in Aptana, it's also not perfect. It too misses things. For example, pointing Aptana at the jQuery library also doesn't capture most of the jQuery wrapped set handling functions. As a developer who lives most of the day in Visual Studio I also find the way that Intellisense and the editor in general behaves is a little foreign and I would much prefer to work in VS than another huge external environment.

Still when I'm working on large libraries like the code above or on complex pages that have more than 10 functions on them I tend to switch to using Aptana, simply because I do a lot of jumping back and forth that is much easier to do in this environment than Visual Studio.

So, am I the only one who doesn't see this as a low priority scenario for JavaScript support in Visual Studio? Seems to me this is a vital feature that is incredibly useful for anything but simple JavaScript development.

What do you think?

Make Donation
Posted in JavaScript  Visual Studio  


Feedback for this Post

 
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Josh Stodola April 25, 2008 @ 3:06pm
Yep! It's Microsoft's forte to give Javascript the shaft. They also don't have a FormatDocument for JS files. You probably already know this, but FormatDocument "prettifies" the code to have consistent indentation to make it easier to read and follow.

Considering how many piss-poor Javascript snippets get pulled from the Internet and used in web applications (either because people don't care to learn JS, or don't have the time to care), you would think that the most practical purpose of FormatDocument is for JS.

They've already heard about it, too: http://forums.asp.net/p/1078312/1590127.aspx
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by genium April 25, 2008 @ 3:42pm
Unfortunately, Visual Studio is not free software, so you are not free to modify it as you'd like. You should try GNU Emacs; it runs on windows; if it misses good features you need, join us and work on
implementing them ;)

http://lists.gnu.org/archive/html/emacs-devel/2008-04/msg01722.html
http://lists.gnu.org/archive/html/emacs-devel/2008-04/msg01857.html
http://lists.gnu.org/archive/html/emacs-devel/2008-04/msg01863.html

Freedom is worth a sacrifice - RMS
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Steve April 25, 2008 @ 7:41pm
I agree Rick, I'm in jQuery alot and out of habit want all the features I get in C#. (I constantly want to click and 'find usages' or 'goto declaration' :)
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by bassem April 26, 2008 @ 3:11pm
Am totally agree with you. Actually that was the first thing I have looked for when I first used VS2008 and hearning about the great capabilities of it regrading javascript.
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Amit April 26, 2008 @ 8:58pm
Totally agree. I was recently given a 5000 line js file to clean up and add new features. I ended up using Apatna just for the outlining and function list features. I would've much preferred to have these in VS. I end up placing a *lot* of bookmarks in my js file in VS. Which is not that helpful because it doesn't remember the bookmarks (I'm still using VS 2003, not sure if later versions remember the bookmarks). I tried out the new JS features in VS 2008, they're far from perfect to say the least.
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Mike Gale April 27, 2008 @ 2:23pm
There is some interesting history in Javascript (C minus minus).

When .NET got started (v 1.0) I was really impressed with JScript.NET. I could do things that C# couldn't and that VB had lost in the transition to .NET. OO where you wanted it mixed with prototype inheritance where that fits best... When no IDE support came out, and I saw the team accepting this, I knew the language was in trouble. (A bit like that announcement that all the COmega stuff would end up in VB and C#. Which is happening, but it takes too much of anybody's lifetime to be exciting!)

Then along come Iron Python, Ruby, F# etc. I wonder if the guys who did such a good job with JScript.NET sometimes wonder if it would have been better to work for themselves and not have to obey managers who don't really care about your great work. In that alternate reality JScript.NET, and on it's back, Javascript, might have gone places a few years ago!!
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Andre Perusse April 28, 2008 @ 6:32am
Well, Visual Studio does have some very limited support for navigating directly to a client-side JavaScript function. From the Object drop-down (the one at the top of the code editor window on the left), select "Client Script." Then in the Event drop-down (the one on the right), you'll see all your client-side JavaScript functions. Unfortunately, this only works with .aspx files, not with .js files. Boo.

The "Document Outline" window (View -> Other Windows -> Document Outline) is also supposed to show a list of client-side scripting functions, but this feature appears to be broken somewhat in VS 2008 as reported in the last post of this thread: http://forums.asp.net/t/1212476.aspx
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Bembeng Arifin May 11, 2008 @ 8:52pm
Hi Rick,
Could not agree more, that would be a very helpful feature to have in VS when we're working with large JS File.
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Lee May 18, 2008 @ 10:52pm
Hasn't the new SP1 thats just come into Beta got a lot more JS support? I know it supports more intellisense for JQuery etc.. So maybe they have addressed the above as well??
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Jonathan Clay-Thomas December 01, 2008 @ 9:14am
This is a very annoying feature. They do, however, add function selectors to behavior files (*.htc). Test this by loading an htc file, choose Client script from the left hand combo (Client objects and events) and then you'll get the list of functions in the right hand combo. Why can't they do the same for normal .js files??
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Jason Sirota January 16, 2009 @ 7:53pm
interestingly enough, if you're modifying an HTML file in the HTML editor, it DOES show the function name in the drop down for Client Scripts. So VS has some parsing of the javascript in there, it's just not enabled for .js files.

<script text="text\javascript">

function myFunction() {

}

</script>
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Patrick March 24, 2009 @ 10:32am
I am trying this:
http://jsaddin.codeplex.com/
and it seems to do fairly well -- it could really use some additional development. But it is better than nothing.
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Luka June 10, 2009 @ 11:37am
Totaly agree, I was searching for something that will help me deal with my js and that is how I end up here. By the way I like comment preview:-)
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Bart Burkhardt September 17, 2009 @ 6:45am
Let's just wait for VisualStudio 2010 and hope it's in there.

Meanwhile look for an editor that's fast to load an has outline like Antechnicus
http://www.c-point.com/index.html

I tried PsPad but it didn't understand OOP classes ;-(
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by bpenelli January 08, 2010 @ 1:45pm
Jason Sirota's comment from Jan 16th gave me an idea and I came up with this trick...

In Tools/Options/Text Editor/File Extensions I added hjs and associated it the HTML Editor.

Create a file something like this (notice the first and last lines... javascript comments):

//<html xmlns="http://www.w3.org/1999/xhtml"><head><title>companyMgt.hjs</title><script type="text/javascript">
 
function hello_world1() {
  alert('hello world 1");
}
 
function hello_world2() {
  alert('hello world 2");
}
 
//</script></head><body></body></html>


Now Visual Studio (I'm using 2005) will display the Client Script option in the left dropdown and the Javascript function in the right drop down.

Now the kicker... you can include the .hjs file it in your html (or whatever) page just like any other javascript file (because the html tags in the .hjs file are just javascript comments):

<script type="text/javascript" src="scripts/fileName.hjs"></script>
# re: Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
by Anthony Potts June 15, 2010 @ 7:21am
I found this blog post because I have a rather large javascript file and a lot of stuff going and it's getting difficult to find functions. After searching some more I found an extension for VS2010 which will provide some help with javascript functions:

http://visualstudiogallery.msdn.microsoft.com/en-us/288a2b0f-1357-47b4-8215-1134c36bdf30
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014