Review: 10 JavaScript editors and IDEs put to the test

1 2 3 4 Page 2
Page 2 of 4

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.

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.

The NetBeans IDE supports JavaScript, as well as Java, C/C++, XML, HTML5, PHP, Groovy, Javadoc, and JSP. Version 7.4 adds support for mobile Web development using the Cordova/PhoneGap framework. The JavaScript support includes syntax highlighting, autocompletion, code folding, code analysis, debugging, and unit testing. (Click the image for the complete view.)

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.

  • Free open source
  • Integrates well with JSP
  • Many plug-ins are available for Eclipse
  • Good JavaScript editing, navigation, and debugging
  • Supports editing multiple selections simultaneously
  • Autocompletion and calltips for JavaScript and other languages, and for libraries such as jQuery
  • Auto-insertion of braces and highlighting of matching braces
  • Integrated support for Subversion, Mercurial, Git, CVS, Perforce, and Bazaar
  • Free open source
  • Supports syntax highlighting, autocompletion, code folding, and code analysis
  • Does debugging and unit testing
  • Integrates source code control, issue tracking, and team servers
  • Supports mobile Web development using the Cordova/PhoneGap framework
  • Code diagnostics return false positives
  • No code folding
  • Slow startup and tepid performance
  • Lacks JavaScript code checking
  • Slower than Sublime Text but faster than Eclipse or NetBeans
  • Relatively slow, especially at startup, compared to Sublime Text or WebStorm
  • Limited selection of plug-ins compared to Eclipse

JavaScript editors and IDEs: Visual Studio 2013In 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 multiplatform tools such as WebStorm and Sublime Text make me happier and more productive.

Visual Studio 2013 provides considerably better JavaScript support than earlier versions of Visual Studio, and it brings ALM improvements that can benefit JavaScript projects. As you can see at the left, syntax coloring and code folding work well. As you can see at the top right, JavaScript code can be treated as a Web project. (Click the image for the complete view.)

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.

1 2 3 4 Page 2
Page 2 of 4
IT Salary Survey 2021: The results are in