Review: 10 JavaScript editors and IDEs put to the test

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

1 2 3 Page 2
Page 2 of 3

When you are debugging a Web application in Chrome with the NetBeans Connector and edit CSS from the Chrome Developer Tools, the changes will be captured by NetBeans and saved into the CSS files. However, if your CSS files were generated from SASS or LESS style sheets, you'll have to manually update the source sheet as the CSS files are merely compiled output.

In the embedded WebKit browser and in Chrome with the NetBeans Connector installed, you can use the NetBeans network monitor to view request headers, responses, and call stacks for REST communications. For WebSocket communications, both headers and text frames are displayed. Overall, NetBeans provides a slightly better debugging experience with Chrome than you get from Firefox and Firebug.

NetBeans integrates source code control with Git, Subversion, Mercurial, and CVS. The Git support is augmented by a graphical Diff viewer and a shelving system within the IDE. NetBeans color-codes the Git status of files, lets you view revision history for every file, and shows you revision and author information for each line of version-controlled files. NetBeans has similar integrations with Subversion, Mercurial, and CVS, although I only tested Git.

NetBeans integrates issue tracking with Jira and Bugzilla. In the NetBeans task window, you can search for tasks, save searches, update tasks, and resolve tasks in your registered task repository. Unfortunately the open source project I used for testing, jQuery Core, operates with Trac rather than Jira or Bugzilla. NetBeans also has team server integration for sites that use the Kenai infrastructure -- basically, kenai.com and java.net.

The defining feature of NetBeans 7.4 is support for mobile Web development with the Apache Cordova framework. Cordova, formerly known as PhoneGap, allows you to write code in JavaScript that is later compiled to native code for iOS or Android. NetBeans 7.4 also supports the Android and iOS browsers.

NetBeans ships with drivers for Java DB, MySQL, Oracle, and PostgreSQL database servers. You can also register any other JDBC driver with the IDE. The NetBeans IDE lets you connect to a database, view current database connections, select or add a driver for your database, enter SQL statements and see the results, run SQL scripts on a connected database, migrate table schemas across databases from different vendors, and create, browse, and edit database structures by running SQL statements or using a graphic view. You can also save a local copy of a database schema for offline use.

I tested the NetBeans database explorer on a MySQL database and found that it worked well, within its specifications. It doesn't have the convenient query-building features you get in Alpha Anywhere or SQL Server Management Studio, but it does the job if you know your SQL.

As far as I can determine, NetBeans lacks any JavaScript profiling, although it can profile Java applications and EJB modules. NetBeans doesn't currently seem to support Node.js, and I don't see that coming in the NetBeans 8.0 release, which is planned for April. While NetBeans can refactor Java and PHP, it can't refactor JavaScript.

Overall, NetBeans is a strong contender for JavaScript/HTML5/CSS3 development, especially if you're also doing Java, PHP, or C++ development. If you don't have the budget for WebStorm or Sublime Text, you'll find that NetBeans does the job.

JavaScript editors and IDEs: Visual Studio 2013

In my full review of Visual Studio 2013 I discussed the product as a whole, with only a few references to JavaScript. I'll reverse the emphasis here.

Overall, Visual Studio 2013 serves very well as a JavaScript IDE, though it is a better .Net IDE, and it is not as good as WebStorm for JavaScript. While it also serves very well as a JavaScript editor, it's a better C# editor, and it's not as good or as fast as Sublime Text for JavaScript.

Given that JavaScript is a platform-agnostic language, Visual Studio's restriction to Windows makes for an "impedance mismatch" to Macintosh and Linux hardware, which requires a Windows virtual machine to overcome. (I am writing this review on an iMac and running Visual Studio 2013 in a Windows 8.1 virtual machine in Parallels.)

As you can see in the screenshot below, Visual Studio 2013 does a good job with JavaScript syntax coloring and code folding. It also does a good job with JavaScript code navigation: Right-click on a function or member name, and you can easily jump to the definition or find all references. When you're done looking at the definition, you can press the back arrow at the top of the interface and return to where you were. The Peek Definition feature you can use with .Net languages isn't yet available to JavaScript.

You can easily insert snippets and surround your selection with appropriate code, such as HTML or URL encoding of string variables. Besides JavaScript, HTML, and CSS, you can edit Markdown files and see the rendered Markdown, and you can work with CoffeeScript. At least some of that functionality comes from the free Web Essentials plug-in, which also adds Minify and JSHint integration.

In addition, you can of course code in any .Net language, in C++, and in Python with a free plug-in. And as has been the case for Visual Studio for a long time, you can work with databases directly from the IDE. Visual Studio is especially strong when working with SQL Server databases. You can get away with using Visual Studio instead of SQL Server Management Studio for the majority of operations you'd want to do as a developer.

Depending on context, Visual Studio 2013's JavaScript code completion can be targeted and useful, or untargeted and not so useful. Fortunately, Visual Studio now puts up a small warning when it doesn't have a context and is showing you the kitchen sink. You can refine even the long untargeted completion list by typing a few letters.

Visual Studio has been good at debugging JavaScript for a long time, but was restricted to Internet Explorer for the most part until last year. Visual Studio 2013 supports debugging in pretty much any browser you care to throw at it, including browsers on mobile devices and in emulators. It also has two browsers of its own: the plain internal Web browser, which is (surprise!) a version of Internet Explorer, and the Page Inspector, which shows you the rendered page along with all the sources and styles. Although the Page Inspector does a lot of potentially time-consuming, reverse-engineering stuff to set itself up for a page, once you're in it you can stay there without having to juggle Visual Studio, the browser, and the browser's developer tools.

The performance of Visual Studio 2013 is usually pretty good if you give it enough memory and CPU power -- and it tends to require significant resources. As I mentioned in my full review, startup performance has improved quite a bit in Visual Studio 2013. I no longer have time to brew tea between bringing it up and starting to work.

Visual Studio 2013 has great performance diagnostics for applications, but by and large they aren't all that useful for ordinary JavaScript code, which typically runs deep inside a browser. It has specific JavaScript function timing, HTML UI responsiveness, and JavaScript memory tools, but they only apply to JavaScript-based Windows Store projects, not Web projects that happen to use JavaScript.

ALM integration in Visual Studio 2013 is very good, but unlike many of the IDEs in this review, it requires you to actually use the IDE when you check out the project. Many of the other tools will automatically recognize and use an existing Git repository. If there's a way to make Visual Studio 2013 do that, I haven't found it.

Overall, if I had to live with Visual Studio 2013 as my IDE for JavaScript, I could do it without too many tears, especially if I were working primarily on Windows-based computers or on projects using Microsoft technologies. However, for the sort of JavaScript development I like to do, on the computers I currently use most of the time, newer multi-platform tools such as WebStorm and Sublime Text make me happier and more productive.

JavaScript editors and IDEs: Sublime Text

If you want a flexible, powerful, extensible programming text editor that is lightning fast and you don't mind switching to other windows for code checking, debugging, and deployment, then look no farther than Sublime Text.

Besides speed, the many noteworthy strengths of Sublime Text include support for more than 70 file types, among them JavaScript, HTML, and CSS; nearly instant navigation and instant project switching (did I mention it's fast?); multiple selections (make a bunch of changes all at once), including column selections (select a rectangular area of the file); multiple windows (use all your monitors) and split windows (take advantage of your screen real estate); complete customization with simple JSON files; a Python-based plug-in API; and a unified, searchable command palette.

For programmers coming from other editors, Sublime Text supports TextMate bundles (excluding commands) and Vi/Vim emulation. The unofficial Sublime Text documentation makes disparaging and incorrect remarks about emacs users -- me, for example -- but I'll overlook them. Why does the unofficial Sublime Text documentation even exist? For one thing, the official documentation is less than complete -- much less.

When I said "nearly instant navigation" earlier I meant it. For example, to jump from the current location on the screen to the definition of getResponseHeader in ajax.js, I can type Command-P on a Mac or Ctrl-P on a PC, then aj to open a transient view into ajax.js, then @grh and Enter to open a tab with getResponseHeader selected. Sublime Text is able to keep up with my typing. It feels as responsive as some of the best old DOS editors such as Brief and Kedit.

Once I've selected getResponseHeader, I can find all usages of the function in context by typing Shift-Command-F on a Mac or Shift-Ctrl-F on a PC, then Enter. A new tab will show me the search results with the search term boxed in each five-line snippet. Double-clicking on boxed text brings up the full file context in a new tab.

Clicking on a file name in the left-hand Folders sidebar brings up a transient tab showing the file's contents. Clicking on a different file replaces that tab. Here again, Sublime Text is able to keep up with my typing and clicking. Similarly, the reduced-size navigation on the top right of the page lets me move within a file nearly instantly, without the overhead of scrolling. I wish Microsoft Word were as responsive.

Multiple selections and column selections make quick work of the sorts of annoying edits that used to require regular expressions. Do you need to turn a list of words into a JSON structure where each word is surrounded by double quotes and each quoted word is separated from the next by a comma? It takes about eight keystrokes in Sublime Text, no matter how many words you have in the list.

On my Windows development box, I use two wide monitors. On my MacBook, I use the Retina display plus a Thunderbolt display. Unless I'm editing on one display and debugging on the other, I usually want to see a lot of different source files and different views into source files simultaneously. Sublime Text supports multiple windows, split windows, multiple workspaces per project, multiple views, and multiple panes containing views. It's fairly simple to use all my screen real estate when I want to, and to consolidate when I need to make space for debugging and testing.

You can customize everything about Sublime Text: the color scheme, text font, the global key bindings, the tab stops, the file-specific key bindings and snippets, and even the syntax highlighting rules. Preferences are encoded as JSON files. Language-specific definitions are XML preferences files. There is an active community around Sublime Text that creates and maintains Sublime Text packages and plug-ins. Many features that I initially thought Sublime Text lacked -- including JSLint and JSHint interfaces, JsFormat, JsMinify, PrettyJSON, and Git support -- turn out to be available through the community, using the Package Installer.

One of the reasons for Sublime Text's great performance is that it is tightly coded. Another reason is that Sublime Text is not an IDE, and it doesn't need the bookkeeping overhead of an IDE.

From a developer's viewpoint, this is a tricky trade-off. If you're in a tight, test-driven, "red, green, refactor" development loop, then an IDE that is set up to edit, test, refactor, and track code coverage will help you the most. If you're doing code reviews or major edits, on the other hand, you'll want the fastest, most efficient editor you can find, and that editor might well be Sublime Text.

JavaScript editors and IDEs: WebStorm

JetBrains' WebStorm, despite its modest price, is a high-end IDE for Web developers, concentrating on the HTML, CSS, and JavaScript front end. JetBrains also sells IDEs for Java, PHP, Ruby, and Python, all of which share a core engine.

As an editor for Web development projects, WebStorm is as good as anything else out there. It has all the features you'd expect, plus many pleasant surprises. You'd expect syntax-coloring and limited code completion. You might not expect accurate code completion for difficult mixed-language cases, such as JavaScript that generates HTML. Whereas some code editors punt and treat the HTML as a plain string, WebStorm recognizes the embedded HTML and parses the next layer. WebStorm's JavaScript code completion for keywords, labels, variables, parameters, and functions is DOM-based, and it supports popular browser-specific methods.

1 2 3 Page 2
Page 2 of 3