Review: 10 JavaScript editors compared

JavaScript programmers have many good tools to choose from -- almost too many to keep track of. In this roundup, I discuss 10 text editors with good support for developing with JavaScript, HTML5, and CSS, and for documenting with Markdown. Why use an editor for JavaScript programming instead of an IDE? In a word: speed. 

The essential difference between editors and IDEs is that IDEs can debug and sometimes profile your code. IDEs also have support for application lifecycle management (ALM) systems. Many of the editors I discuss here support at least one version control system, often Git, so that criterion is less of a differentiator between IDEs and editors than it used to be.

As you’ll see by the scores, Sublime Text is still tops among JavaScript editors, for its speed as much as its convenient editing features. Brackets and TextMate are nearly tied for second place, though I should note that TextMate is a Mac-only product, and Brackets is free. All three of these editors support ALM systems, Node.js, CoffeeScript, TypeScript, and code analysis tools either natively or through add-ons. Brackets even includes JavaScript debugging. 

The other seven tools don’t rank with the above three, and I didn’t give them full evaluations. Nevertheless, they all have features worth recommending. Depending on the task at hand, you might find any one of them handy to have around. 

Let’s go through the options, and I’ll compare them at the end.

Atom

Atom is a free, open source, hackable programming editor from GitHub for Windows, Mac OS X, and Linux that integrates with the GitHub app and has roughly 1,800 packages and 600 themes available. I get by with only nine community packages, plus the 73 core packages and 12 core themes. 

Not surprisingly, given its origin, the Atom source is hosted on GitHub. It is written in CoffeeScript and integrated with Node.js. Atom is a specialized variant of Chromium designed to be a text editor rather than a Web browser; every Atom window is essentially a locally rendered Web page. The Atom team develops Atom in Atom. 

Atom’s performance is pretty good when it isn’t updating itself. It’s fully featured out of the box and includes a fuzzy finder, fast project-wide search and replace, multiple cursors and selections, multiple panes, snippets, code folding, and the ability to import TextMate grammars and themes. Atom can install two command-line utilities, Atom to start the editor from a shell, and Apm to manage Atom’s packages, in the spirit of Npm for Node.js. I find myself using Atom a lot when browsing repositories I cloned from GitHub because the GitHub application includes a context menu item for doing so.

BBEdit and TextWrangler

BBEdit ($49.99) and TextWrangler (free) are Mac-only HTML and text editors that support about 35 programming and markup languages, with community support for many other languages (of varying quality) available through the BBEdit website. Both programs do syntax highlighting; BBEdit also does a certain amount of autocompletion, mostly for function names, variable names, a few keywords, and ctags. It supports Perforce and Subversion; for Git support, you can use a shell. 

BBEdit 11 was a major rewrite of the product, and it’s even faster than before, as well as still being able to handle ginormous files gracefully. It has an Extract function that copies a selection or Find result into a new buffer, and a Clippings function. BBEdit can edit and run Perl, Python, Ruby, and Shell scripts, and it can check syntax for Perl and Python scripts. 

BBEdit’s support of HTML and Markdown are good -- better than its JavaScript support. You can install three command-line tools for BBEdit: one for the editor, one for its difference engine, and one for its multifile search. 

TextWrangler is certainly worth having around on a Mac. BBEdit might be worth having if you don’t like our recommended IDEs or editors, or if you need its large file support.

Brackets

Brackets is a free open source editor, originally from Adobe, for the next generation of the Web, an effort to build better tooling for JavaScript, HTML, CSS, and related open Web technologies. Brackets itself is written in JavaScript, HTML, and CSS, and the developers use Brackets to build Brackets. In addition to the built-in capabilities, Brackets has an extension manager, and extensions are available for many of the languages and tools that front-end developers use. Brackets is not as speedy as Sublime Text or TextMate, but it’s pretty fast except for pauses to load or update program content from the Web. 

Brackets combines good support for JavaScript, CSS, HTML, and Node.js with some nice features, such as inline editing of CSS related to an HTML ID (Quick Edit). Brackets also features a clean UI and a live preview for Web pages that you are editing. It’s a very good choice for a free code editor. 

JavaScript autocompletion in Brackets is very good, with automatic closing of parentheses, angle brackets, and square brackets, as well as automatic drop-down menus for keywords, variables, and methods, including jQuery methods after you type “$”. Brackets can control the Node.js debugger and restart Node from a menu item. It’s easy to add extensions for additional functionality such as TypeScript and CoffeeScript support, Bower integration, and Git integration.

Quick Edit, Quick Docs, Quick Open, and Live Preview all help to streamline Web application editing and let you focus on what you’re coding or designing. On the downside, some Brackets extensions can be a bit tricky to configure, but not as tricky as emacs packages or vim plug-ins. 

Komodo Edit

Komodo Edit, ActiveState’s free, reduced-functionality version of Komodo IDE, is a pretty good multilanguage editor. It provides advanced JavaScript editing, syntax highlighting, navigation, and debugging -- Node.js included. Like Sublime Text and TextMate 2, it supports editing multiple selections simultaneously. 

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’d 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. You’re also giving up the HTTP inspector. If you have another tool to look at headers and responses, such as Firefox with Firebug, then you’re losing only 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 the Regular-Expressions.info website, 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 you can find a comparison table for Komodo IDE and Komodo Edit here. 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.

Notepad++

Notepad++ is a free Windows source code editor and Notepad replacement that 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 capabilities including syntax coloring and folding, column-mode editing, 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 to work with 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, its minimalist approach felt less useful 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.

Sublime Text

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

Besides speed, the many noteworthy strengths of Sublime Text include support for more than 70 file types, including JavaScript, HTML, and CSS; nearly instant navigation and instant project switching; 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 (moi, for example), but I’ll overlook them. Why does the unofficial Sublime Text documentation even exist? Well, for one, 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.