Review: The 6 best JavaScript IDEs

JavaScript is used for many different kinds of applications today. Most often, it works with HTML5 and CSS to build web front ends. But JavaScript also helps build mobile applications, and it has found an important place on the back end in the form of Node.js servers. Fortunately, JavaScript development tools—both editors and IDEs—are rising to meet the new challenges.

Why use an IDE instead of an editor? The main reason is that an IDE can debug and sometimes profile your code. IDEs also have support for application lifecycle management (ALM) systems, integrating with the likes of Git, GitHub, Mercurial, Subversion, and Perforce for version control. But as more editors add hooks to these systems, ALM support is becoming less of a differentiator.

Eclipse 2021 with JavaScript Development Tools

Back in the ancient days when Java Swing was new and exciting, I enjoyed using Eclipse for Java development, but soon moved on to other Java IDEs. Ten-plus years ago, when I did some Android development with Eclipse, I found the experience okay, but poky. When I tried using Eclipse Luna with JSDT for JavaScript development in 2014, it constantly displayed false-positive errors for valid code that passed JSHint.

Fortunately, several vendors and open source projects have stepped up to the plate since then. Eclipse 2018 with JavaScript Development Tools had a half-decent plain JavaScript editor and a Chrome-based debugger, but it didn’t know about TypeScript, which is used by Angular, or about ES6 (ECMAScript 2015) and JSX files, which are used by React.

Eclipse 2021 with Web Tools Platform 3.23 includes JSDT 2.x, and supports ES6; Node.js and tools like npm, Bower, Gulp and Grunt; and Chromium debugging. In other words, it has changed little in three years.

Eclipse has always enjoyed a huge marketplace of plugins. The plugins for Angular, TypeScript, and React have been updated more often than the Web Tools Platform; as of this writing, Wild Web Developer and CodeMix seem to be the best options, although several reviewers in the Eclipse Marketplace criticize each of them as less than optimal. I’d consider switching to another tool for these languages and frameworks, for example Visual Studio Code, unless you absolutely must work inside of Eclipse.

IDG

Cost: Free. Platforms: Linux, macOS, Windows.

ActiveState Komodo IDE

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

Komodo IDE provides advanced JavaScript editing, syntax highlighting, navigation, and debugging, but it doesn’t include JavaScript code checking. For that, you can always run JSHint in a shell.

Komodo supports dozens of programming and markup languages, and offers a wide range of support, including refactoring, debugging, and profiling. Komodo IDE is a very good choice for end-to-end development in open source languages.

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

Komodo also has both column editing and multiple selections, providing near parity with Sublime Text and TextMate for mass edits. If we’re comparing tools, Komodo is more of an IDE, while Sublime Text is much faster. On the performance side, Komodo’s speed has improved noticeably compared to older versions, with faster 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 a great way to build and test regular expressions for JavaScript, Perl, PHP, Python, and Ruby.

Collaboration is another Komodo IDE differentiator—think of it as 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 is 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.

Although Komodo doesn’t have its own JavaScript document formatter, it takes advantage of the best free open source projects 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.

IDG

Komodo 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 for these languages. It also supports debugging client-side JavaScript in Chrome, and it can debug Node.js both locally and remotely.

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. Its code profiling and unit testing modules do not support JavaScript. However, JavaScript and Node.js are both supported by Komodo’s Code Intelligence module, which implements code browsing, autocompletion, and calltips.

The IDE can publish groups of files over FTP, SFTP, FTPS, or SCP. It can also synchronize files and detect potential publishing conflicts that could cause you to overwrite another developer’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.

Cost: Free as part of the ActiveState Platform. Platforms: Windows (7 or higher), macOS (10.9 or higher), Linux.

Apache NetBeans 12.5

NetBeans has very good support for JavaScript, HTML5, and CSS3 in web projects, and it supports the Cordova/PhoneGap framework 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 for free under an open source license.

The NetBeans JavaScript editor provides 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.

NetBeans 8.2 had new or improved support for Node.js and Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha, and Selenium. NetBeans 12.5 has a few other improvements relevant to JavaScript, but the documentation is undergoing an overhaul, so it’s hard to track them. With any luck that will be finished when NetBeans 12.6 is released. TypeScript files edit with correct syntax coloring right out of the box in NetBeans, unlike Eclipse.

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 your JsTestDriver browsers.

When you are debugging a web application in Chrome with the NetBeans Connector and edit CSS from Chrome Developer Tools, the changes will be captured by NetBeans and saved into the CSS files. However, if your CSS files were generated from Less or Sass style sheets, you’ll have to manually update the source sheet because 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 in Firefox with Firebug.

IDG

NetBeans integrates source code control with Git, Subversion, Mercurial, and CVS. The Git support is augmented by a graphical diff viewer, and by a shelving system within the IDE. NetBeans color codes the Git status of files, lets you view the 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, but I only tested Git.)

The NetBeans IDE 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. NetBeans also has team server integration for sites that use the Kenai infrastructure.

As far as I can determine, NetBeans lacks JavaScript profiling, although it can profile Java applications and Enterprise JavaBeans (EJB) modules. And while NetBeans can refactor Java and PHP, it cannot refactor JavaScript.

Overall, NetBeans is a decent contender for client-side JavaScript, HTML5, and CSS3 development, especially if you are also doing Java, PHP, or C++ development on the server. If you don’t have the budget for WebStorm and dislike Microsoft, you’ll find that NetBeans does the job, as long as you aren’t in a huge hurry.

Cost: Free. Platforms: Windows, Solaris, macOS, Linux.

Microsoft Visual Studio 2017

In my full review of Visual Studio 2017 I discussed the product as a whole, with only a few references to JavaScript. I’ll reverse that emphasis here. Note that the current versions of Visual Studio are 17.0 (2022) for Windows, and 8.10 for Mac. Visual Studio’s handling of JavaScript and TypeScript has improved noticeably since my last review, but my conclusions are mostly still valid.

Overall, Visual Studio 2017 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.

As shown in the screenshot below, Visual Studio 2017 does a good job with JavaScript syntax coloring and code folding. It also does well 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 to go back to where you were.

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 TypeScript.

In addition, you can of course code in any .Net language, in C++, and in Python. 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 most database operations you’d want to do as a developer.

InfoWorld

Visual Studio 2017 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, and Page Inspector, which shows you the rendered page along with all of the sources and styles. Page Inspector does a lot of potentially time-consuming, reverse-engineering stuff to set itself up for a page, but once you’re in it you can stay there without having to juggle Visual Studio, the browser, and the browser’s developer tools.

Performance is usually pretty good if you give Visual Studio 2017 enough memory and CPU power, but it requires significant resources. Note that Microsoft claims that Visual Studio 2022 can handle much larger projects than previous versions; I haven’t tested it myself.

Visual Studio 2017 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. Visual Studio has specific JavaScript function timing, HTML UI responsiveness, and JavaScript memory tools, but they only apply to JavaScript-based Universal Windows Platform projects, not web projects that happen to use JavaScript.

IDG

Visual Studio 2017 includes excellent Node.js application editing, IntelliSense, profiling, npm integration, TypeScript support, debugging locally and remotely (Windows, macOS, Linux), and debugging on Azure Web Apps and Azure Cloud Services. It also has support for CSS, HTML, JavaScript, TypeScript, CoffeeScript, and Less. This includes running JSHint as you type, allowing you to minify JavaScript files from a context menu, and automatically compiling CoffeeScript files on save, showing a side-by-side preview of the generated JavaScript.

ALM integration is also very good. I would happily use Visual Studio 2017 as my IDE for JavaScript if I were working primarily on Windows-based computers on projects using Microsoft technologies, especially ones that included Azure deployments and those of enterprise scale.

Cost: Ranges from free for Community SKUs to $5,999 (first year) for Visual Studio Enterprise Standard Subscription (MSDN) with a perpetual-use software license. Platforms: Windows 7 Service Pack 1 or later.

Microsoft Visual Studio Code

Visual Studio Code is a free lightweight editor and IDE from Microsoft. It has components of Visual Studio, mixed with the open source Atom Electron shell, providing excellent support for ASP.Net Core development with C# and for Node.js development with TypeScript and JavaScript. Breaking with Microsoft’s historical pattern of only supporting Visual Studio on Windows, Visual Studio Code also runs on macOS and Linux. The screenshot below was taken on macOS.

InfoWorld

Visual Studio Code has amazingly good JavaScript code completion, thanks to the TypeScript compiler and Salsa engine. Visual Studio Code sends your JavaScript code to the TypeScript compiler in the background to infer types and build a symbol table. You can see the results in the box near the bottom of the screenshot, which shows the information for the hasOwnProperty method.

The same symbol table enables IntelliSense to give you great pop-up option lists for code completion throughout the typing of an expression. Automatic options include parenthesis closure, word completion, method lists, and parameter lists within a method. You can enhance IntelliSense by adding references to d.ts files from DefinitelyTyped. Visual Studio Code will offer to do that for you when it recognizes common problems, such as the use of __dirname, which is a Node.js built-in variable.

IDG

Git support is very good and quite simple to use. The Visual Studio Code debugger provides an excellent debugging experience for Node.js development (and ASP.Net development). The IDE has very good tooling for HTML, CSS, Less, Sass, and JSON, tooling that is based on the same technology that powers the Internet Explorer F12 developer tools. In addition, it has customizable integration with external task runners such as gulp and jake.

Visual Studio Code has attracted a robust ecosystem of plugins—for example, to support Angular and React. This is the editor I now recommend in my tutorials about building apps with JavaScript and TypeScript frameworks and libraries.

Cost: Free. Platforms: Windows, macOS, and Linux.

JetBrains WebStorm

Despite its modest price, JetBrains’ WebStorm 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.

InfoWorld

As an editor for web development projects, WebStorm is as good as anything else out there. It has everything 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.

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, and it shows you the browser compatibility of your current choice.

JavaScript is of course a rather prolix dynamically typed interpreted language. To add better type checking, some people prefer to write TypeScript. WebStorm supports TypeScript and includes a TypeScript compiler. To attain more compact code, some people prefer to write CoffeeScript. WebStorm supports that, too, and even adds debugging support for source maps to trace TypeScript, CoffeeScript, or ECMAScript 6 code transpiled to JavaScript.

Code inspections built into WebStorm cover many common JavaScript issues, as well as those in Dart, EJS, HTML, Internationalization, Less, Sass, XML, XPath, and XSLT. WebStorm includes JSHint (which is recommended by the jQuery team), JSLint, and the other major JavaScript static code checkers.

Configuring Node.js for other products 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 and profile 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 provides runtime evaluation of JavaScript expressions (and an elements tab in Google Chrome).

When 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.

IDG

For unit testing, WebStorm bundles the JsTestDriver plugin. 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 need to know how to refactor manually, and you always need to decide what needs to be refactored, an editor that automates the process can be a big timesaver. There isn’t much fancy refactoring to do in a JavaScript library, especially compared to Java or C++, 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.

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 (for example, Git stash). WebStorm also tracks your local change history and displays changes inline with the option to easily revert, so you can’t lose work or break the code between commits unless you try really, really hard.

Performance is not an issue when using WebStorm. Startup may be slower than Sublime Text, which is basically an editor, but it’s faster than most 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 be sent to obsolete blog posts. In some cases, I found it easier to experiment with the program and revert my files if necessary, rather than looking up the details of how things worked.

Overall, WebStorm is a good choice for serious JavaScript/HTML5/CSS developers who want a full-featured IDE and either qualify for a free copy or have a little budget for a license. 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.

Cost: Free to $129 depending on use and affiliation, including one year of upgrades. Additional years of upgrades are free to $103. You can use the same environment on any supported platform with your single license key; 30-day free trial. Platforms: Windows (XP or higher); macOS (10.5 or higher); Linux 64 bit (KDE, GNOME, or Unity desktop environment).

The IDEs of JavaScript

While Eclipse 2021 can’t handle modern Angular and React projects out of the box, Eclipse, as always, has a huge marketplace of plugins. For Angular and TypeScript, you can add Wild Web Developer and/or CodeMix. With one or both plugins, Eclipse becomes usable for modern JavaScript projects, though still not blazingly fast.

Komodo IDE is an old favorite of mine, and I can still recommend it if you are using JavaScript in combination with PHP, Perl, Python, or Ruby, or doing extensive Ajax work, or writing lots of regular expressions. Otherwise, it’s not quite up to the standards set by WebStorm and Visual Studio Code.

I generally like NetBeans, and it’s free, but not exactly a speed demon. I can recommend it only if you’re using JavaScript in conjunction with Java server technologies.

Visual Studio 2017 and later versions are very, very good as a JavaScript IDEs, but tend to be heavyweight and resource intensive. I can certainly recommend Visual Studio for enterprise application development involving a lot of JavaScript. If, in addition to writing JavaScript or TypeScript, you’re using .Net for your back end, talking to databases, deploying to containers, using Azure services, or deploying to Azure, then Visual Studio might be the right IDE for you.

Visual Studio Code, a free, lightweight product, combines many of the strengths of Visual Studio with the open source Atom Electron shell, runs on macOS and Linux as well as Windows, and has a robust plugin ecosystem. It’s the IDE I recommend in my JavaScript and TypeScript framework tutorials, as it’s both very good and free.

WebStorm is the JavaScript IDE I recommend for serious JavaScript/HTML5/CSS developers who want a full-featured IDE and either qualify for a free copy or have the budget for a license. With excellent editing features, on-the-fly code analysis, strong ALM integration, and support for the leading JavaScript frameworks, WebStorm checks all of the boxes for professional JavaScript developers—and then some.