JavaScript developers have a wide range of code editors available to make their work more efficient and enjoyable. In practice, the most essential features are available in all the most popular editors (such features include code highlighting and auto-completion, git integration, and plugin support). And yet, most developers have their own favorite editor, which differs from the others in some small but important details.
In my experience, it can be difficult to make a switch from one editor to another. For many years, I did all my development work in Sublime Text and didn’t think much about making a change. But when I did make the switch (to VS Code) – my productivity went up a hundredfold. I still use both since both serve a specific purpose (at least for me), which might also be the case for you.
The most important thing is that you understand the features you require personally. This article will highlight the best features for each code editor / IDE to make it easier for you to decide.
What are IDEs and code editors?
Integrated development environments (IDEs) and code editors (CEs) are software applications used to write and edit code. We could technically write code in a text editor, but IDEs and CEs offer additional features that simplify the coding process.
IDEs usually have more features than code editors, but some code editors can be configured to have features similar to those of IDEs. Code editors often have features such as syntax highlighting, autocomplete, and bracket matching. IDEs combine several developer tools into a single graphical user interface. At a minimum, these tools usually consist of a code editor, a compiler or interpreter, and a debugger.
What to look for when choosing an IDE or code editor
Every programmer has individual preferences for IDEs and code editors. You may try several applications before you find one that works for you.
Here are a few criteria to consider when evaluating your options:
- Cost. There are both free and paid applications to choose from. Determine your budget and consider that you may try several apps before you find the right one. Many apps offer a free trial period if you are open to paid options.
- Learning curve. It takes time to adapt to a new interface and memorize keyboard shortcuts. Although learning curves are unique to each user, some apps have been known to require steeper learning curves for beginners. If you choose one of these apps, give yourself time to adapt and develop an effective workflow.
- Functionality and customizability. Each editor has different features, so it’s helpful to know what features you’re looking for. Some popular features are multilingual support, autocomplete, and integration with Git and GitHub. If an IDE or code editor doesn’t offer certain features, see if you can get them with plugins or extensions.
- Accessibility. Unfortunately, IDEs and code editors leave much to be desired regarding improving accessibility. While many offer features to support visually impaired programmers, such as screen readers or font correctors, such tools tend to have flaws. For example, screen readers cannot convey visual indicators of some of the most useful features, such as syntax highlighting and refactoring suggestions.
Visual Studio Code – the Swiss Army knife
Platforms: Windows, macOS, Linux.
Visual Studio Code (VS Code) is a free code editor developed by Microsoft. VS Code boasts a large community and strong technical support. And it also has the largest Plugins ecosystem out of any code editor on the market; to work with VS Code properly, you will need to learn how to use plugins to get the most out of it.
VS Code has its IDE counterpart, Visual Studio. Visual Studio is especially revered as an IDE for C, C ++, and C Sharp. However, it is not free, and novice JavaScript developers will likely find it overly complex. If you don’t mind installing plugins to extend the functionality of VS Code, then VS Code offers enough for JavaScript development.
Key features:
- Support for JavaScript, TypeScript, PHP, Python, C++, and many other programming languages
- syntax highlighting, auto-complete code, powerful refactoring tools
- building and debugging JavaScript-applications
- Extensive customization of the user interface and theme support
- a huge number of extensions for all purposes, with an easy-to-navigate UI
- integrated Git client
- built-in terminal for easy work with console applications (Node.js, etc.)
- support from Microsoft, high-quality documentation, and videos for beginners
- lightweight with great performance
As for drawbacks, probably the most significant would be that for first-time users – VS Code can feel a bit like a spaceship. There’s a lot to learn when it comes to settings and menus. And the fact that you also have to get extensions doesn’t make that any easier. That said, it’s a fantastic code editor and easily the best choice for working with JavaScript, specifically – JavaScript frameworks.
Sublime Text – snappy and practical
Platforms: Windows, macOS, Linux.
A lightweight but quite a powerful editor that is suitable for both novice developers and professionals. Sublime can be configured to work with complex projects with deep folder hierarchy. It supports auto-completion, multiple windows, and instant syntax editing across project files.
You can also save snippets (code snippets you use often), so you can paste them with a keyboard shortcut, without having to search through old projects.
Key features:
- Hotkeys for almost any action, great for productivity
- Visual code navigation (map-style sidebar)
- Great choice of custom themes that can be customized
- Split view – multiple editor windows
- Plugins ecosystem – great variety for both front-end and back-end needs
- Exceptional performance when working with large files
- Works with Git and Build tools
Sublime Text is a proprietary editor: you can buy it for $99. But the trial version is available for free, and the duration of its use is not yet limited by the developers. You’ll get the occasional notification, but buying the editor is not enforced per se.
WebStorm – productivity at its best
Platforms: Windows, macOS, Linux.
WebStorm stands out because it is a full-featured integrated development environment (IDE) for JavaScript. The developer of this IDE is JetBrains.
The WebStorm editor is fantastic for working on big projects for frameworks such as React, Angular, Next.js, etc. You can use it to debug node scripts and run tests on an embedded server. You can also run and debug npm scripts (with a tree-like interface). And you don’t need any plugins for all that.
That said, a plugin ecosystem is available for more specific functions not built into the IDE. But in most cases, everything you may need is already in the IDE. WebStorm has a built-in version control system that commits whenever you save a file.
It’s purely internal, completely separate from your git commits. Files are saved at least in cases where the code window is out of focus. So if you haven’t Git committed in a while and you want to go back and see the previous state from your last commit, you can do that without any problem.
Key features:
- Custom Tests engine with hundreds of in-built error detectors.
- Unit tests through Jest, Mocha, etc.
- In-built debugger.
- Live Edit – preview changes without needing to save every time.
- Intelligent auto-completion, on-the-fly error checking, and tips for improving code.
- Extensions and custom themes. duh!
- Free for students and teachers, universities and schools, and open-source projects.
Keep in mind that WebStorm is not free outside the abovementioned cases. The price of this IDE starts at $7 per month or $70 per year for individuals, with each consecutive year costing less.
Notepad++ – is this thing still on?
Platforms: Windows.
Chances are, some of you reading this article are younger than Notepad++, which was first released in 2003! This open-source text editor is much more than just a clever replacement for Notepad. It supports syntax highlighting for all popular (and more!) languages, assembly, and markup systems – all the way up to Ada, COBOL, and Fortran.
Notepad++ is very lightweight and fast. Thousands of plugins make it an editor for all purposes: there’s a grammar checker in different languages, file comparison, digital signature generation, conversion to different encodings, and much more. And best of all, if you close Notepad++ and leave unsaved files in it, they will automatically open the next time you run the program.
In general, even if you don’t use Notepad++ as your main code editor, it’s good to have it on your PC. Changing the encoding, fixing JSON, or looking at a file of an unknown type is very fast and easy with it. Notepad++ is updated regularly, so bugs are quickly fixed, and new features are added frequently.
Lapce – an open-source powerhouse
Platforms: Windows, macOS, Linux.
Lapce is a powerful up-and-coming code editor written in Rust. It supports all major programming languages, including C++, JavaScript, Python, and Ruby. The goal for Lapce is to make it possible for developers to write code quickly and efficiently.
In the list of features, you’ll find a built-in terminal that allows you to execute commands directly from the editor. The editor integrates well with other tools like Git and provides the means to connect to remote machines. It has a plugin system, and built-in LSP (Language Server Protocol) for intelligent code features such as completion, diagnostics, and code actions.
While the project is far from ready for its v1 release, it is both in active development and actively used. The project has over 20,000 stars on GitHub, with an extremely involved community.
GitHub.Dev – code editing in the browser
Platforms: Browser.
GitHub has done a lot of work in recent years to make it possible to manage GitHub repos without a code editor at all. Not only through Codespaces, but also by improving the visual interface on the GitHub website itself. And, they also offer the GitHub Dev service, which is a lightweight VSCode-inspired editor in your browser.
With it, you can browse GitHub projects and make changes to them, including submitting your changes as commits. It’s a great solution if you’re already working with GitHub daily and may need a way to quickly make a change without firing up your entire dev environment.
What happened to Atom?
On June 8th, 2022 – GitHub announced that it is sunsetting the Atom code editor.
Their main reason for doing so is the fact that a lot more development is happening in the cloud these days (probably not the only reason) – and instead, they are now focusing entirely on GitHub Codespaces.
Some of the original team members for the Atom editor have begun working on a new editor – Zed. A collaboration-first code editor written in Rust.
It’s still in the very early stages of development, but they have been making frequent releases, and a waitlist is also available to sign up for.
Summary
If you’re a beginner learning JavaScript and want to start out with a completely out-of-the-box environment, VSCode is the obvious choice. It’s easy to use (once you understand the settings) and has many built-in features and functionality.
More experienced developers who know exactly what they want may find WebStorm and Sublime to be more up their alley, as they give you full control over your development environment. You can additionally install thousands of packages, selecting only the ones you need for your work environment.
Lastly, if you’re a Mac user – make sure to check out our other article on code editors for Mac.
