Monday, August 15th, 2005

JavaScript IDE Support: IDEA 5.0 doesn’t cut the mustard?

Category: Editorial

We want JavaScript to be a first class citizen in our IDEs right? Both Ben and I are big fans of IntelliJ IDEA, and I was keen to try out the JavaScript support in 5.0. I kept up as builds from the Early Access Program came about, but was a little dissapointed.

Lance Hankins says it all here:

Alas, the 5.0 support for JavaScript isn’t even close to being that sophisticated. You can do a few simple things, but nothing close to what you can do from the Java side when it comes to refactoring.

After overcoming my initial disappointment (and using 5.0 for a few days), I do believe the new version is a step in the right direction, however. Here are a few of the new features that I find helpful:

  • You can do <ctrl-space> completion for local variable names
  • It will let you refactor-rename variables / function parameters (<shift-f6>). It will NOT let you do this
    for methods.
  • It will flag duplicate variable declarations as errors.
  • In general – its fairly good at highlighting syntax errors for you (an improvement over their previous JS
    support).
  • They added the block comment hotkeys (<ctrl-shift-/>).
  • They now treat JS that is inlined in a JSP like first class JS (parse it, syntax highlight it, etc).
  • You can do a limited form of “find-usages”. Its limited to the class level, however, not the method level.

In summary, I think what they’ve added is a step in the right direction, but there is certainly room for a ton of improvement in this area. I realize that some of the slick refactorings they have on the Java side are much more difficult in JavaScript, since everything’s so loosely typed. Nonetheless, here are a few things I’d like to see in future builds:

  • Find usages on methods
  • Refactor-rename methods
  • Show inheritance chain for classes
  • Typing “this.” should do a better job of popping up all the known methods for the current object. For example, if
    I type this from a class method, it should at least show all available methods from the current class and any
    superclasses.
  • CTRL-F12 from the JS file should give you a list of methods like it does in Java.

Knowing the JetBrains folks, there will be improvements in the future.

Ironically for us Java folk, Visual Studio .NET beta 2 (soon 3) is kinda the best tool for this stuff. It lets you target various browsers and changes its context based on that. Very nice indeed.

What IDEs do you like to use for serious JavaScript development?

Posted by Dion Almaer at 1:45 am
8 Comments

+++--
3 rating from 5 votes

8 Comments »

Comments feed

Is there a IDE? Currently I use Ultraedit and just played a bit with UEStudio. But this software seems to be great. Will test it – now :)

Comment by Sebastian — August 15, 2005

there are several plugins for eclipse.
I use net.sourceforge.jseditor (v0.0.5),
simple but very useful (outline view).

The site says that eclipse WDT will replace it
but last time I check this project, it wasn’t as good as the original plugin (poor object-oriented js support)

Comment by arnaud — August 15, 2005

As I know the Plugins for eclipse could be nice. But there need to be done much more. The outline view is buggy on objects and only shows some parts of the object.

This seems to be better in this tool but not perfect yet.

Sadly there seems to be really no good IDE on the planet to edit javascript IMHO.

Comment by Sebastian — August 15, 2005

Dion, you wrote ‘Typing “this.” should do a better job of popping up all the known methods for the current object. For example, if I type this from a class method, it should at least show all available methods from the current class and any superclasses.’

But it’s a bit more complicated that that, isn’t it? If I’m writing an event handler callback for my Button object, let’s say, I might want to attach it to the Button prototype, so that I know where to find it. But when the callback is invoked, ‘this’ is no longer my Button object, but the DOM element that received the mouse click.

Trying to build refactoring on top of Function objects that can be passed from one context object to another is a pretty tall order, eh?

Regards,

Dave

Comment by Dave Crane — August 15, 2005

If you are on windows with IE and office, you can try the MS Script editor (free with office), contains a very useful debugger.

http://www.mandala.com/javascript/debug_javascript.html

Comment by Wei — August 15, 2005

Thanks for the IntelliJ experience, I’m looking forward testing some of the refactoring tools and syntax parsing.

I’ve been settling into ActiveState’s Komodo 3.1. Komodo is built using XUL and the Scintilla api. Although mostly intended for other languages it handles js very nicely.
High points:

– Outliner for functions in the active document, but it tends to be too literal when parsing object literals
– CTRL-SPACE completes local variable names
– RegExp toolkit, SVN integration, integrated Mozilla browser, and overall very nice keyboard integration w/ menus and panels.

Comment by Matt Seeley — August 16, 2005

I use aptana (eclipse-based):

aptana.com

Comment by abomuhammed — October 3, 2006

Visual Studio 2005 Beyatchez!

Comment by Ya Momz — December 1, 2006

Leave a comment

You must be logged in to post a comment.