Review: The 10 best JavaScript editors

JavaScript programmers have many good tools to choose from—almost too many to keep track of. In this article, 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, and they have support for application lifecycle management (ALM) systems. Many of the editors discussed 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.

Sublime Text and Visual Studio Code are tops among JavaScript editors—Sublime Text for its speed as much as its convenient editing features, and Visual Studio Code for even better features and speed that is almost as good. Brackets takes third place. While TextMate ranked high on my list a few years ago, its capabilities haven’t really kept pace with new developments.

Most likely, you’ll find your JavaScript editor of choice in Sublime Text, Visual Studio Code, or Brackets. But several other tools—Atom, BBEdit, Notepad++, Emacs, and Vim—all have something to recommend them. Depending on the task at hand, you might find any one of them handy to have around.

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 further than Sublime Text.

Besides speed, Sublime Text’s noteworthy strengths include support for more than 70 file types, among them 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 plugin 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 thing, the official documentation is less than complete—much less.

IDG

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, I can type Command-P on a Mac or Ctrl-P on a PC, then aj to open a transient view into Ajax, 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 its packages and plugins. 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 doesn’t need the bookkeeping overhead of an IDE.

From a developer’s viewpoint, this is a tricky tradeoff. If you’re in a tight, test-driven development loop of “red, green, refactor,” then an IDE that’s 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. That editor might well be Sublime Text.

Cost: Unlimited free trial; $70 per user for a business or personal license. Platforms: Windows, macOS, and Linux.

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.

Visual Studio Code has amazingly good JavaScript code completion, thanks to the inclusion of the TypeScript compiler and the 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 screen below, 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. You get automatic parentheses closure, automatic word-completion options, automatic method lists after you type ., and automatic parameter lists within a method. You can enhance IntelliSense by adding references to d.ts files from <a href="https://github.com/borisyankov/DefinitelyTyped" rel="nofollow noopener" target="_blank">DefinitelyTyped</a>, and 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). Visual Studio Code has very good tooling for HTML, CSS, Less, Sass, and JSON, which 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. It is now the editor I recommend in my tutorials about building apps with JavaScript and TypeScript frameworks and libraries.

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

Brackets

Brackets is a free open source editor, originally from Adobe, built to provide better tooling for JavaScript, HTML, and CSS, as well as related open web technologies. Brackets itself is written in JavaScript, HTML, and CSS, and its developers use Brackets to build Brackets. In addition to its 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 still pretty fast except for pauses to load or update program content from the web.

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

IDG

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 JSX 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 tricky to configure, but not as tricky as Emacs packages or Vim plugins.

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

Atom

Atom is a free, open source, hackable programming editor from GitHub for Windows, macOS, and Linux that integrates with the GitHub application and has thousands of packages and themes available. I get by with a few community packages, plus the core packages and themes.

Not surprising, 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.

IDG

Atom’s performance is pretty good when it isn’t updating itself. It is fully featured out of the box, with 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 that.

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

Notepad++

Notepad++ is a free, open source 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. Its load time is fast enough and performance strong enough 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 formerly used Notepad++ extensively when developing JavaScript applications on Windows machines. At the time, I preferred it to Visual Studio 2008 for that purpose. Notepad++ stayed out of my way, which 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 a free download. If you have a Windows machine or VM, you should have Notepad++ installed, ready when you need it.

Cost: Free, open source. Platform: Windows only.

BBEdit 

BBEdit 14 (available in $49.99 licensed and free unlicensed versions) is a Mac-only HTML and text editor that supports about 35 programming and markup languages, with community support (of varying quality) for many other languages available through the BBEdit website. Both versions do syntax highlighting; the licensed version also does a certain amount of autocompletion, mostly for function names, variable names, a few keywords, and ctags. The licensed version also integrates with the Git, Perforce, and Subversion version control systems.

BBEdit 11 was a major rewrite of the product, making it even faster than it was before, as well as still being able to handle ginormous files gracefully; BBEdit 12 is a 64-bit version with dark mode support. BBEdit has an extract function that copies a selection or find result into a new buffer, and a clippings function. It can edit and run Perl, Python, Ruby, and Shell scripts, as well as check syntax for Perl and Python scripts.

BBEdit’s support of HTML and Markdown is good—actually 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.

The free unlicensed version of BBEdit is certainly worth having around on a Mac. It might be worth buying a license if you don’t like our recommended IDEs or editors, or if you want BBEdit’s HTML tools, clippings system, or version control support.

Cost: Free limited unlicensed version; $49.99 per user for full version. Platforms: macOS only.

TextMate

TextMate was once 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. With version 2.0, the product looked ready to make a comeback. It was moribund for several years but is now again in active development.

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 plain JavaScript and jQuery, which provide a bunch of nice tools for generating JavaScript and jQuery code quickly. For near-IDE-like functionality you can use TextMate’s shell integration, but don’t expect code refactoring or automatic unit or regression testing. If you set up Grunt correctly, of course, you can automate your JavaScript testing at that level.

Those cool kids building Rails applications with TextMate a decade ago (including DHH, if I remember correctly) did have to use a keystroke (^) to trigger their test runs. On some other Rails IDEs, they could have run tests automatically on save. These days, they might automatically trigger regression tests on a git push using a Jenkins server.

IDG

Note that only the most popular bundles actually ship with the product. TextMate has a bundles preference tab from which you can download and install additional bundles simply by checking their boxes. The source for the bundles, and indeed the source for the product, resides in GitHub repositories. When I added bundles for many languages I happen to know, I discovered that adding too many bundles can make the actions menu a bit unwieldy. But once you learn the key mappings for the bundle commands you use the most, the menu size won’t matter.

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

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 close to Sublime Text. It might be a hair slower, but I’d need a stopwatch to be sure. I certainly can’t complain about it.

Cost: $59 for a single-user license; site, business, and academic licenses available. Platform: macOS.

Emacs

Emacs and its heirs and variants have been around since the early 1970s at the MIT AI lab, starting as macros for the TECO text editor and becoming a standalone later. Emacs release dates were the object of some humor back in the day. GnuEmacs was the start of the Gnu project; the rather heated disagreements between Richard Stallman (aka rms) and the people who had left the AI lab for Lucid and Symbolics were legendary.

I won’t say “Get off my lawn!” but it was a natural transition for me to switch from TECO to Emacs in the late 1970s, on my VT-52 terminal, and I continued to use variants of Emacs for decades on various computers and operating systems. My friends who still “live” in Emacs often do all their software development there. In the old days, they also read their email and newsgroups there.

The Emacs installed on macOS by default is 22.1.1 and built without GUI support. You can easily install XEmacs, Aquamacs (GUI for macOS), and newer GNU Emacs versions on whatever system you have. If you’re old school, you can build the One True Editor the One True Way: from source. With a little work, you can customize your Emacs (hint: edit your .emacs file with Emacs, and test your elisp code in the buffer before saving it) with packages for almost anything you want, including playing Adventure and Tetris. You’ll want to add Melpa as a package repository.

To the point of Emacs as a JavaScript editor: The default major mode for editing JavaScript is in the js package, but you can get better syntax highlighting and linting with the js2-mode package, and autocompletion with ac-js2. You can get live browser JavaScript, HTML, and CSS interaction with skewer-mode. Of course, there are packages for Git, Subversion, and other ALMs.

If you really want to get weird, try the Emacs packages that give you Vi or WordStar emulation. If this sounds too complex, you may not even want to deal with Emacs key combinations. Ctrl-x Ctrl-c will get you out.

A completely pimped-out Emacs installation is a thing of beauty. For true retro joy (when you get tired of JavaScript), install a Common Lisp (for example, SBCL) and SLIME mode, and hack like someone from the MIT AI Lab.

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

Vim (and variants)

Vi (visual interface) was originally written by Bill Joy for Unix, starting in 1976, as an evolution from Ed via Ex (an enhanced version of Ed). Vim is a free, open source, improved version of Vi; the version installed on Mac OS X by default is 7.3. The most important thing to know about Vi before you try it is how to exit: :q.

You can easily install a newer version of Vim, MacVim (the GUI for macOS), or whatever is available for your platform. With more work, you can install a plugin manager (I use vim-plug), edit your .vimrc file to specify plugins, and install the plugins (:PlugInstall if using vim-plug). Does this sound a lot like Emacs? Just wait. If you’re old school, you can build Vim from source; you’ll find instructions at the Vim project site.

To the point of Vim as JavaScript editor: The suggestions in the vim-plug readme file are pretty good, and if you search the web for “vim javascript syntax” you’ll get several conflicting suggestions. Vi users, like Emacs users, are nothing if not opinionated. On the other hand, most of the suggestions you’ll find are pretty good, and a completely pimped out Vim installation is a pleasure to use, if not quite a thing of beauty. (But consider the source, as I used Emacs for almost a decade before having to launch Vi on a system that didn’t have Emacs installed, and when I did, I struggled to discover :q.)

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

Choosing a JavaScript editor

Whether you specialize in client-side JavaScript or Node.js, you have a number of options. If you’re looking for a powerful, blazing-fast programming text editor for JavaScript and a lot of other languages and you don’t mind shelling out $70, Sublime Text is likely to make you happy. If you want a free, fast JavaScript editor that doubles as an IDE and does a great job with ASP.Net and C#, look no further than Visual Studio Code.

Brackets and Atom are two fairly new, free programming text editors you might like. Brackets is very close to being able to function as an IDE for Node.js development, and Atom is tightly integrated with the GitHub desktop clients.

On Windows, Notepad++ is fast, useful, and free. On macOS, BBEdit is fast, useful, free in a limited edition, and it’s available with version control integration, HTML tools, and other extras for a modest price. TextMate is still a terrific editor—fast, full featured, and extensible—but development has slowed to a crawl. At this point I’d recommend BBEdit over TextMate for Mac users.

If you’re old school and not afraid of rolling up your sleeves to customize your editor, you might find Emacs or Vim to your liking—and be able to turn them into IDEs or something close.