Contact   •   Articles   •   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  

The Voices of Reason


 

Josh Stodola
April 25, 2008

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

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

genium
April 25, 2008

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

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

Steve
April 25, 2008

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

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' :)

bassem
April 26, 2008

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

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.

Amit
April 26, 2008

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

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.

Mike Gale
April 27, 2008

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

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!!

Andre Perusse
April 28, 2008

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

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

Bembeng Arifin
May 11, 2008

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

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.

Lee
May 18, 2008

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

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??

Jonathan Clay-Thomas
December 01, 2008

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

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??

Jason Sirota
January 16, 2009

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

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>

Patrick
March 24, 2009

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

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.

Luka
June 10, 2009

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

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:-)

Bart Burkhardt
September 17, 2009

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

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 ;-(

bpenelli
January 08, 2010

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

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>

Anthony Potts
June 15, 2010

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

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 - 2015