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.
[ JetBrains' WebStorm and Sublime Text are InfoWorld 2014 Technology of the Year Award winners. Read about the other winning products in our slideshow, "InfoWorld's 2014 Technology of the Year Award winners." | For quick, smart takes on the news you'll be talking about, check out InfoWorld TechBrief -- subscribe today. ]
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.
Read on for the full details. You might find that more than one of these tools deserves a place in your toolkit.
JavaScript editors and IDEs: Eclipse with JSDTI 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:
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.
The Eclipse IDE for Java EE Developers includes JavaScript development support as part of the Web Tools Platform. Oddly enough, the JavaScript code-checking feature falsely reports syntax errors for the widely used production version of jQuery Core. The project is working to reduce the number of false error reports in a future version. (Click the image for the complete view.)
JavaScript editors and IDEs: Komodo IDEI'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.
Komodo IDE provides advanced JavaScript editing, syntax highlighting, and navigation, but doesn't include significant JavaScript code checking. It supports dozens of programming and markup languages, with emphasis on Perl, Python, PHP, Ruby, Tcl, and XSLT, and it includes debugging, refactoring, source code control integration, and unit testing. (Click the image for the complete view.)
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.
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.
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.
Sublime Text is a highly configurable and extensible text editor for code, markup, and prose. It knows more than 50 syntaxes out of the box, including JavaScript (shown), and it can be extended with TextMate syntax definitions. (Click the image for the complete view.)
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.
You'd expect code formatting for JavaScript and HTML, but you might not expect much in the way of Markdown support. (Markdown is commonly used for formatting the documentation files in Git repositories.) And yet, after I installed a free plug-in that was offered as soon as I opened my first Markdown file, WebStorm provided both syntax highlighting and output preview for Markdown files.
Viewing and navigation are extremely important to me when I'm reviewing code, whether it's other people's code, my old code, or my questionable new code. WebStorm easily navigates to declarations and symbols, and it finds and highlights usages of symbols, labels, and files.
JavaScript is not only still evolving, but it has different implementations in different browsers and other environments. WebStorm lets you set your JavaScript language version as low as JavaScript 5.1 and as high as ECMAScript Harmony, and it shows you the browser compatibility of your current choice.
Code inspections built into WebStorm cover many common JavaScript issues as well as issues in Dart, EJS, HTML, Internationalization, LESS, SASS, XML, XPath, and XSLT. WebStorm includes JSHint (which is recommended by the jQuery team) and supports JSLint.
Configuring Node.js often requires a painful session in the command shell. WebStorm automates Node.js and NPM installation, upgrading, and source code configuration. WebStorm also allows you to debug Node.js applications and autocomplete CommonJS class members.
In addition to debugging Node.js applications, WebStorm can debug JavaScript code running in Mozilla Firefox or Google Chrome. It gives you breakpoints in HTML files as well as JavaScript files, and it lets you customize breakpoint properties. It shows you frames, variables, and watch views in the debugger UI, and it provides runtime evaluation of JavaScript expressions (and an elements tab in Google Chrome).
During debugging, a feature called LiveEdit allows you to change your code and have the changes immediately propagate into the browser where you are running your debug session. This saves time and helps you avoid the common problem of trying to figure out why your change didn't do anything, only to discover that you forgot to refresh your browser.
For unit testing, WebStorm bundles the JsTestDriver plug-in. This was originally a Google project, but JetBrains is now contributing to its development. In addition, WebStorm can integrate with the Karma test runner. For either testing method, WebStorm tracks code coverage.
Refactoring is an important step that many software developers tend to avoid because it's so easy to introduce errors when you do it manually. However, while you must know how to do it manually and always decide what needs to be done, an editor that can automate refactoring can be a big time-saver. There isn't much fancy refactoring to do in a JavaScript library, especially compared to a Java or C++ library, but WebStorm automates all of the refactoring types that make sense: renaming; extraction of variables, parameters, and methods; inlining; changing signatures; moving; and copying.
WebStorm can deploy via FTP, SFTP, FTPS, to local or mounted folders, and in place. WebStorm can download, upload, synchronize, and compare directories and files on demand, and it can automatically upload if you wish.
JetBrains' WebStorm is an IDE for HTML, CSS, JavaScript, and XML, with support for projects and version control systems, including GitHub. WebStorm is more than an editor, although it's a very good editor. It can check your code and give you an object-oriented view of your project. (Click the image for the complete view.)
WebStorm integrates with all of the major version control systems: Subversion, Mercurial, Git (including GitHub), Perforce, CVS, and TFS. It has its own shelving system that you can use to clean your working tree prior to an update from version control, as an alternative to using the version control system's shelving system (such as Git stash). WebStorm also tracks your local change history and displays changes inline with the option to easily revert; you can't lose work or break the code between commits unless you try really, really hard.
Performance is not really an issue when using WebStorm. Startup may be slower than Sublime Text, which is basically an editor, but it's faster than any of the other actual IDEs, and much faster than the Java-based IDEs NetBeans and Eclipse.
At a high level, WebStorm has enough documentation to get you started and to answer major questions. When you drill down, however, you may find yourself being sent to obsolete blog posts. In some cases, it was easier to experiment with the program and revert my files if necessary than to look up details of how things worked.
Overall, WebStorm is my top pick for serious JavaScript/HTML5/CSS developers who want a full-featured IDE. However, if you also write a lot of non-JavaScript server-side code, you may want to investigate an IDE that supports your server-side languages and your databases as well as JavaScript. If you really don't need an IDE, consider Sublime Text or another editor with good JavaScript syntax highlighting.
- Supports syntax highlighting for more than 50 programming languages, including JavaScript, HTML, and CSS
- Lightning-fast startup, file loading, viewing, and scrolling
- Excellent editing and navigation
- Simple integration with external build systems
- Easy extension using plug-ins
- Good code editing and navigation, syntax highlighting, and code folding
- Good debugging support in multiple browsers
- JavaScript function timing
- Very good support for Git and Team Foundation Server
- Excellent IDE focused tightly on Web development with HTML, CSS, JavaScript, and XML, plus JavaScript frameworks and related languages such as CoffeeScript
- Does syntax highlighting, documentation lookup, and refactoring
- Supports integrated version control with CVS, Git, GitHub, Mercurial, and Subversion
- Does on-the-fly code analysis, error highlighting, and quick fixes
- Has its own project system with specialized project views, file structure views, and quick jumping between files, classes, methods, and usages
- Includes FTP deployment, JavaScript debugger, unit-test runner, and integrated code coverage
- Lacks version control support as shipped, but many version control plug-ins are available for prices ranging from free to $10
- Lacks refactoring and code analysis
- No OS X or Linux support unless you run Windows in a virtual machine
- New "Peek definition" action not supported for JavaScript
- Requires significant startup time
- Omits server-layer and database-layer support (JetBrains has other products with additional server-side support)
JavaScript editors and IDEs: Odds and endsMost likely, you'll find your JavaScript tool of choice among the six options discussed above. But the four tools below -- Alpha Anywhere, Komodo Edit, Notepad++, and TextMate -- all have something to recommend them. Depending on the task at hand, you might find any one of them handy to have around. And except in the case of Alpha Anywhere, the cost is either free or insignificant.
Alpha Anywhere. Most development tools for JavaScript help you write as much JavaScript code as possible. Alpha Anywhere ($99 per month; Windows Vista or above) helps you write as little JavaScript as possible. Instead of making you concentrate on the code, it asks you to concentrate on the functional user interface design, then generates code based on your graphical choices. You only need to write JavaScript code yourself for actions that haven't already been written, either by Alpha Software or by you.
Another difference is that most development tools for JavaScript concentrate on the front-end code, with little or no regard for the rest of a Web or mobile Web application: the database, the application server, the Web services, and the Web server. Alpha Anywhere is an end-to-end tool. That offers some interesting efficiencies. For example, look at the code in the screen image below and notice the odd construction {dialog.object}. That's clearly not normal JavaScript.
In fact, it's an abstraction or placeholder for the UX component, which is conveniently resolved by the application server layer at runtime, and replaced with the actual handle of the component. All of the properties and methods of the component are then referenced through the generated handle. We can see that easily by looking at the generated source code for the callMenuItem function. Where the original source code said:
{dialog.object}.closeWindow('SLIDEINMENU');
The runtime source code says:
DLG1_DlgObj.closeWindow('SLIDEINMENU');
So {dialog.object} has become DLG1_DlgObj.
When there is more than one component of the same type in an application, Alpha Anywhere automatically numbers them: DLG1_DlgObj, DLG2_DlgObj, and so on.
Along the same lines, the database for an Alpha Anywhere application is abstracted to a named connection string. What might be a Microsoft Access MDB file for development can be a SQL Server database with the same schema running in the Microsoft Azure cloud. Your code doesn't need to know or care.
If you look at the screen image, you'll see multiple preview buttons. There are some for using desktop Web browsers (with device emulators for mobile Web applications) and some for doing a remote test on a phone or tablet. Similarly, you'll find buttons for publishing a Web project and for opening the PhoneGap Builder.
There's a lot here, and it can be very valuable and productive when you use Alpha Anywhere as intended, for end-to-end Web and mobile Web application development. On the other hand, Alpha Anywhere JavaScript editing per se is nothing special. If that's all you want, then WebStorm or Sublime Text might better serve your needs.
[Disclosure: I was an Alpha Software employee from 2010 to 2012, and I have a small equity stake in the company.]
Alpha Anywhere minimizes the amount of JavaScript you need to write by generating most of a Web or mobile application from a user interface design. Here we see three short custom JavaScript functions required for a fairly complex mobile Web application that browses a sales database from iPads and iPhones. (Click the image for the complete view.)
Komodo Edit. Komodo Edit, ActiveState's free reduced-functionality version of Komodo IDE, is a pretty good multilanguage editor. Everything I had to say about Komodo IDE as an editor applies to Komodo Edit.
If you like Komodo IDE but can't afford it, Komodo Edit is likely to make you happy. But Komodo Edit is not an IDE, so you should understand what you'll have to work around. You'll need to do your source code control outside the editor. That probably isn't a big problem if you have a GUI client -- such as the GitHub client or TortoiseSVN -- for your version control system.
You're also giving up real-time code collaboration. If you work alone, that isn't a loss. If you work closely with other developers who are remote from you, then you're giving up some productivity when you pass up this feature. And you're giving up the HTTP inspector. If you have another tool to look at headers and responses, such as Firefox with Firebug, then you're only losing some convenience.
You're giving up publishing from your editor, though you can fill that gap with FileZilla. You're giving up the nice Komodo Rx toolkit, though you can partially fill that gap with this site, for free. Or you could pay $39.95 for Regex Buddy or Regex Magic if you're a Windows user. Of course, once you start buying a bunch of individual utilities, you'll quickly rack up a bill that approaches the cost of Komodo IDE.
I could go on, but this comparison table for Komodo IDE and Komodo Edit has all the vitals. In any case, Komodo Edit may well satisfy your JavaScript editing needs for free -- and give you editing of HTML, CSS, Python, Perl, Ruby, Tcl, and a whole bunch of other programming and markup languages.
Komodo Edit is the free, stripped-down sibling of Komodo IDE. Komodo Edit has the same editing features as its big brother, but lacks code refactoring, debugging, unit testing, source code control integration, and other features that properly belong to an IDE. (Click the image for the complete view.)
Notepad++. A free Windows source code editor and Notepad replacement, Notepad++ does a decent job of editing JavaScript. It also supports about 50 other programming and markup languages. It has a workspace tree view, a function list tab, and a document map tab in addition to its multidocument editing window, and it has fast enough load time and strong enough performance that it doesn't feel like it's slowing you down.
With syntax coloring and folding, capable editing functions (including column-mode editing and regular expression support for search and replace), and a certain amount of function completion and parameter hinting, Notepad++ can easily be your primary code editor for JavaScript. However, it's far from the most fully featured JavaScript editor in terms of being able to generate code, perform operations such as refactoring, and navigate quickly within a large project.
I used Notepad++ extensively when developing JavaScript applications on Windows machines. At the time, I preferred it to Visual Studio 2008 for the purpose. By staying out of my way, Notepad++ allowed me to concentrate on the code I was trying to build. Later on, Notepad++'s minimalist approach felt less compatible to me, and I adopted other tools that reduced the number of keystrokes required to generate code.
Notepad++ is still useful in a pinch, and it's free for the downloading. If you have a Windows machine or VM, you should have Notepad++ installed, ready when you need it.
Notepad++ is a free Windows source code editor and Notepad replacement that does a decent job of editing JavaScript files. It has a workspace tree view, a function list tab, and a document map tab. (Click the image for the complete view.)
TextMate. Once upon a time, TextMate ($55, OS X 10.7 and higher) was all the rage among the cool kids who wrote Ruby on Rails on their MacBooks while sitting at tables in college cafés. TextMate has since become less prominent as it fell into neglect and Sublime Text gained popularity, but with version 2.0 the product could be ready to make a comeback.
TextMate is not an IDE, but by using its "bundles," snippets, macros, and scoping system, you can often gain features that even a language-specific IDE lacks. TextMate now ships with bundles for, among many others, plain JavaScript and jQuery, which provide a bunch of nice tools for generating JavaScript and jQuery code quickly. Note that only the most popular bundles actually ship with the product. TextMate has a bundles preference menu from which you can download and install additional bundles.
Markdown support is provided in one of the in-package bundles. It includes a document preview function, a Markdown cheat sheet, and lots of shortcuts for generating Markdown mark-up.
Although it isn't documented yet, the Git bundle works well to integrate TextMate with Git and GitHub. TextMate recognized my existing Git repositories without any prompting when I opened them as project directories, and it was able to update them from GitHub using a pull command from the bundle. The SQL bundle lets you work with MySQL and PostgreSQL databases.
As far as speed goes, TextMate is right up there with Sublime Text. It might be a hair slower, but I'd need a stopwatch to be sure. I certainly can't complain about it.
It looks like TextMate is coming back from its temporary obscurity. I wish it well.
TextMate 2.0 is the newly updated code and markup editor for the Mac. TextMate is not an IDE but its snippets, macros, and scoping system can often provide features that even a language-specific IDE lacks. As seen above, TextMate now includes "bundles" for JavaScript and jQuery. (Click the image for the complete view.)
This article, "Review: 10 JavaScript editors and IDEs put to the test," was originally published at InfoWorld.com. Follow the latest developments in JavaScript and application development at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.
Read more about application development in InfoWorld's Application Development Channel.
