Review: 10 JavaScript editors and IDEs put to the test

javascript

WebStorm and Sublime Text lead a field of diverse and capable tools for JavaScript programming

JavaScript is used for many different kinds of applications today. Most often, it's partnered with HTML5 and CSS to build Web front ends, but it's also used for mobile applications, and it's even finding a place on the back end in the form of Node.js servers. Fortunately, JavaScript development tools -- at least some of them -- are rising to meet the new challenges.

In this roundup, I look at 10 different editors and IDEs (integrated development environments) of interest to JavaScript programmers. Six of these -- ActiveState's Komodo IDE, Eclipse with JSDT (JavaScript Development Tools), Microsoft's Visual Studio 2013, NetBeans, Sublime Text, and JetBrains' WebStorm -- could serve as the primary JavaScript tool for serious developers. I've given these six products full, scored evaluations.

The other four tools -- Alpha Anywhere, Komodo Edit, Notepad++, and TextMate -- don't rank with the above group, and I didn't give them full evaluations. Still, they're worth knowing about, so I've included them in the discussion.

Most of the tools reviewed here run on Windows, OS X, and Linux. A few run on only one or two of these platforms. Many are full-featured integrated development environments, and some are code editors with smarts about JavaScript.

Which should you pick? I have to give you the consultant's answer: It depends on what you need, like, and can afford.

If you want a flexible, powerful, extensible, and lightning-fast programming text editor, look no further than Sublime Text. For bonus points, it's also cross-platform. And while Sublime Text is definitely not an IDE, it can be beefed up using plug-ins to take on some of the features of an IDE.

For integrated development focused exclusively on JavaScript, HTML5, and CSS, consider WebStorm. It's an incredibly productive and capable professional IDE for Web development that comes at a very reasonable price. I recommend WebStorm for serious JavaScript developers.

For integrated development that goes further afield, consider Visual Studio 2013, NetBeans, or Komodo IDE.

For Windows-based development, Visual Studio 2013 offers a good JavaScript IDE, with good code editing and navigation, syntax highlighting, code folding, debugging, and JavaScript function timing. Support for ALM, specifically Git and TFS, is very good.

NetBeans is a quite capable and complete IDE, and version 7.4 adds welcome support for Android and iOS mobile Web development based on Cordova/PhoneGap. On the downside, it can be frustratingly slow, especially at startup.

Komodo IDE is a professional cross-platform IDE for major Web languages, including HTML, CSS, and JavaScript. It comes with a JavaScript debugger and advanced JavaScript editing, including refactoring. And it supports syntax highlighting for dozens of programming and markup languages, with emphasis on Perl, Python, PHP, Ruby, Tcl, and XSLT.

Eclipse has usable JavaScript support if you are willing to overlook the incorrect code diagnostics, lack of code folding, and slow IDE startup. I can't recommend Eclipse for serious JavaScript development. If you have no budget, you're better off with NetBeans for an IDE or any of the free editors discussed in this article.

Finally, Komodo Edit, Notepad++, and TextMate are lighter-weight alternatives that may work well for more casual JavaScript coding. And Alpha Anywhere is a horse of a very different color: a visual tool that allows you to create Web, mobile Web, and mobile hybrid applications with a minimum of manual coding.

Check the InfoWorld Test Center scorecard or read on for a more detailed review of the top IDEs for JavaScript. You might find that more than one deserves a place in your programming toolkit.

JavaScript editors and IDEs: Eclipse with JSDT

I rarely take an active dislike to an IDE. In the context of JavaScript development, however, I have to say Eclipse is an exception.

Back in the days when Java Swing was new and exciting, I enjoyed using Eclipse for Java development. Even last year, when I did some Android development with Eclipse, I found the experience OK. In attempting to use the Kepler build (SR1 4.3.1) of the Eclipse IDE for Java EE Developers for JavaScript development, I was constantly disappointed.

On a positive note, Eclipse is at this point fairly mature. There's a plug-in for any open source project, programming language, or popular ALM product you can imagine.

The project to support JavaScript editing in Eclipse is called JSDT (JavaScript Developer Tools). As of the middle of last year, JSDT is part of the WTP (Web Tools Platform) project. I tested JSDT 1.5.1.

JSDT has lofty goals:

...to make JSDT the most accurate JavaScript IDE while still keeping it very fast. Since JSDT's foundation is in the JDT, many of the rich editing features of the JDT carry over, as well as its facilities for smart error detection and correction, detailed flow analysis, pluggable content completion, and its flexible AST for use by plug-in developers. The end result is a fast, feature-packed JavaScript IDE and extensible framework that's well suited for AJAX and other JavaScript development needs.

If it were only so -- alas, Eclipse with JSDT is not fast compared to any of the other JavaScript IDEs in this review, nor is it accurate. For that matter, it's not stable, either: It throws a number of runtime errors.

The AST (abstract syntax tree) is itself buggy, and this is reflected in errors in the "smart error detection and correction." This isn't a hopeless situation, however. The JBoss Tools Team posted at Planet Eclipse on Jan. 27 that it had started to contribute to the JSDT project to fix the important bugs and overcome the important limitations. The results of its work are already reflected in the Git repository, but not in any current releases.

JSDT is supposed to have the following key features:

  • Syntax highlighting
  • Full outlining showing classes, functions, and fields
  • Highlighting and checking of matching bracket and parentheses
  • Auto-completion of brackets, parentheses, and indentation
  • Marking of occurrences
  • Generation of element JSDoc
  • Smart code completion based on a real-time JavaScript model
  • Hover help that displays element declaration with JSDoc or error message
  • Configurable error/warning checking, including full-language syntax and type/class structure resolution
  • Flow analysis showing unreachable code, unused variables, and variable hiding
  • Quick fixes
  • Completion templates
  • Extensible and customizable code formatting
  • Full search
  • Refactoring -- renaming, moving, member extraction
  • Support for user-defined and browser libraries

Of that admirable list, the syntax highlighting and limited refactoring usually work OK, as do marking of occurrences and bracket/parenthesis matching. Hover help kind of works, but it often displays bogus error messages. Smart Code Completion kind of works, but it's slow and unreliable. Quick fixes seem to be something to avoid for the most part.

Part of the issue with the JSDT implementation of JDT-based functionality is that typing is explicit in Java, while in JavaScript it is implicit and often needs to be inferred. While there is some type inference in JSDT, it doesn't work well for jQuery (or many of the other popular JavaScript frameworks), which leads to some of the problems mentioned above with bogus error messages and unreliable code completion, even with the JSDT for jQuery plug-in installed.

JSDT is supposed to have integrated debugging support for Rhino and Crossfire. As far as I can tell, only the Rhino debugger works.

If you have to use Eclipse for JavaScript development -- for example, because you generate JavaScript from JSP code and Eclipse is mandated in your organization -- I'm sure you can get by. But I wouldn't want to do it myself.

JavaScript editors and IDEs: Komodo IDE

I've been a user and fan of Komodo IDE since it was first introduced in 2001. Although newer products, such as Sublime Text and WebStorm, have surpassed it in some areas, it is still a very good editor and IDE.

Komodo IDE provides advanced JavaScript editing, syntax highlighting, navigation, and debugging, but it doesn't include JavaScript code checking. Komodo supports dozens of programming and markup languages, with emphasis on Perl, Python, PHP, Ruby, Tcl, and XSLT. With its wide range of programming and markup language support, including refactoring, debugging, and profiling, Komodo IDE is an excellent choice for end-to-end development in open source languages.

As of version 8.5, Komodo has a code refactoring module for all of the languages for which it provides code intelligence: PHP, Perl, Python, Ruby, JavaScript, and Node.js. Unfortunately, the "least common denominator" nature of this approach limits the capabilities to renaming variables and class members and to extracting code into a method. Nevertheless, these are some of the most useful cases.

Komodo IDE already had column editing; in 8.5, it added multiple selections. This provides near parity with Sublime Text as far as mass edits are concerned. As long as we're doing the comparison, Komodo is more of an IDE, and Sublime Text is much faster. And since we're discussing performance, Komodo's speed has improved noticeably compared to older versions, in screen drawing, search, and syntax checking.

Komodo IDE has several features that most competing products lack. One is its HTTP Inspector, which is excellent for debugging AJAX callbacks. Another is its Rx (regular expression, or regex) toolkit, which is an excellent way to build and test regular expressions for JavaScript, Perl, PHP, Python, and Ruby.

Another differentiator is the database explorer, which lets you examine the structure and content of various databases. SQLite and Oracle support are built in. I installed a MySQL extension in a few minutes, and it worked well. Unfortunately, extensions for additional databases, such as Microsoft SQL Server and PostgreSQL, don't seem to be available. For this particular purpose, you either need to use a separate database client program or an integrated development system that knows about lots of different databases, such as Alpha Anywhere.

Collaboration is another Komodo IDE differentiator -- think Google Docs for code. You can create sessions for groups of files, add contacts to sessions as collaborators, then work together on the same files at the same time, with near-real-time synchronization.

Collaboration is not a replacement for source code control, but it's a useful supplement. Komodo IDE integrates source code control using CVS, Subversion, Perforce, Git, Mercurial, and Bazaar. Only the basic version control operations are supported. Advanced operations, such as branching, must be done using a separate source code control client.

While Komodo doesn't have its own JavaScript document formatter, it takes advantage of the best free open source for this purpose. Out of the box, the default formatter for JavaScript files is JS Beautifier, but another nine options are available through a drop-down menu.

Komodo IDE does not support debugging client-side JavaScript, but it does debug Node.js, both locally and remotely. It also debugs Perl, Python, PHP, Ruby, Tcl, and XSLT. Of course, you can always debug in Firefox with Firebug.

Komodo IDE has a DOM viewer that lets you view XML and HTML documents as collapsible trees. It also lets you do XPath searches to filter the tree.

JavaScript is not supported by Komodo's code-profiling or unit-testing modules. However, JavaScript and Node.js are both supported by Komodo's Code Intelligence module, which implements code browsing, auto-completion, and calltips.

Komodo IDE can publish groups of files over FTP, SFTP, FTPS, or SCP. Komodo can also synchronize files and detect potential publishing conflicts that could cause you to overwrite other people's changes.

Overall, Komodo is a good but not great JavaScript IDE and a good but not great JavaScript editor. However, it may well serve your needs -- especially if you also work with Perl, Python, PHP, Ruby, Tcl, or XSLT.

JavaScript editors and IDEs: NetBeans

NetBeans now has very good JavaScript/HTML5/CSS3 support (added in version 7.3) and brand-new Cordova framework support for building JavaScript-based mobile applications. NetBeans isn't the fastest IDE on the block, but it's one of the more complete, and of course, the price is right: NetBeans is available free under an open source license.

The NetBeans JavaScript editor does syntax highlighting, autocompletion, and code folding, pretty much as you'd expect. The JavaScript editing features also work for JavaScript code embedded in PHP, JSP, and HTML files. jQuery support is baked into the editor.

Code analysis runs in the background as you edit, providing warnings and hints. Debugging works in the embedded WebKit browser and in Chrome with the NetBeans Connector installed. The debugger can set DOM, line, event, and XMLHttpRequest breakpoints, and it will display variables, watches, and the call stack. An integrated browser log window displays browser exceptions, errors, and warnings.

NetBeans can configure and perform unit testing with the JsTestDriver, a JAR (Java archive) file you can download for free. Debugging of unit tests is automatically enabled if you specify Chrome with NetBeans Connector as one of the JsTestDriver browsers when you configure JsTestDriver in the Services window.

This story, "Review: 10 JavaScript editors and IDEs put to the test" was originally published by InfoWorld .

1 2 3 Page
Join the discussion
Be the first to comment on this article. Our Commenting Policies
See more