Finding the best code editor can have a big impact on your productivity and workflow. Whether you are new to the world of programming or an old hand, you'll need a great code editor to help you perform your magic.
The best code editors will make you more efficient at coding and writing, assist you in examining and editing your code, and be customisable to meet your needs. They will also create a more comfortable user experience, which should not be underestimated, as you’ll be looking at your code editor for potentially hours every day.
There are dozens of text editors, code editors, IDEs, and more out there for you to choose from. So how do you pick? You really only want to have to make the switch to a new editor once in a while, as you'll lose some efficiency while you’re adjusting to the different software.
Read on to discover five of the best code editors for developers and designers, and find the best-in-class tool for you to use every day. At the end of the post on page 3, you'll also find information on what is a code editor, and how to pick the right code editor.
Sublime Text is the editor that really changed the way code editors worked. It is lightweight, open and ready to edit your file almost as soon as you have managed to click the button. This responsiveness is one of the things that makes Sublime Text the best code editor in its class. If you want to open a file and make a quick edit, waiting for a few seconds for loading may not sound like much, but the delay can grow tedious.
Another big benefit of Sublime Text is that it is crazily extensible, with a huge and ever-growing list of plugins available to install via the package manager. Options include themes with which to customise the editor’s appearance, code linters (which can assist with more quickly locating any errors in your code), Git plugins, colour pickers, and more.
Sublime Text is free to download and start using, but for extended use you'll need to shell out $80 for a licence – and the programme will remind you fairly regularly about payment until cough up. If you decide to pay, the same license key can be used by you for any computer that you use, so you can enter the same code on all your machines to make the payment reminder popup go away. The paid license, however, is perhaps Sublime Text’s biggest downside – there are a number of competitive products available to developers for no cost.
Visual Studio Code is a code editor developed by Microsoft, and surprisingly, as an open-source software. VS Code is perhaps the closest code editor in this list to being an IDE. It is very robust, and is also one of the slower programs when starting up. However, while using it, VS Code is quick and able to handle quite a few interesting tasks, such as quick Git commits or opening and sorting through multiple folders’ worth of content.
VS Code has seen a meteoric rise in popularity – it is continually growing its user base and attracting developers away from other editors. VS Code has a built-in terminal, as well as built-in Git support, both of which are big winners for fans of this program. Its ‘IntelliSense’ feature offers autocompletion of code as well as information on the parameters of functions and known variable names.
Atom is open source and developed by GitHub. In its initial development, it was heavily influenced by the new style of editor made popular by Sublime Text. However, there are key differences: Atom is free and open source, and offers easy out-of-box integration with Git and GitHub. Atom has historically had performance and stability problems, but those have diminished significantly as it has matured. It’s true that it still launches slower than some editors, but it’s just as reliable and quick to use as any of the rest after that.
Further reading: Get more from Atom text editor
Brackets is Adobe’s open-source editor, and seems to be a very well rounded software. It doesn’t natively support as many languages for syntax highlighting as some of the others (but it still has quite a few). Because of its focus on frontend technologies, it also supports CSS preprocessors like Less and Sass.
Brackets doesn’t come out on top on many of the usual speed and reliability metrics, but it does have several unique features worth investigating. It is mostly configurable via its menus, whereas most of the other editors in this list require you to edit configuration files (you can also edit the configuration file in Brackets if you prefer).
There's also an interesting feature for quick CSS editing. You can use a hotkey to pop out a small section on an HTML page, then edit any CSS rules that are currently affecting the element that you have selected. This means you can quickly locate a styling problem and fix it without having to waste time searching around.
An interesting design decision is that Brackets doesn’t use tabs at all for showing open files. Rather, there is an open files menu in the top left, above the file tree. If you’re using the split-window view, this open tabs list also splits ‘Left’ and ‘Right’ for easier location of the file you’re looking for. VS Code uses a similar open files menu, for example, but also uses tabs. In Brackets, this enables maximum screen real estate, but could be a jarring experience if you’re used to tab navigation.
Vim is perhaps the most contentious code editor in this list. Vim is a command line software, included natively with Linux operating systems and macOS, and available for download for Windows. Vim is a favourite for many old school programmers, and keyboard enthusiasts.
The program is navigated entirely via the keyboard, making it much faster and more efficient – but only if you make the effort to learn how to operate it. It is also extremely customisable (to the extent that a command line program can be customised). You can use a number of keyboard shortcuts to speed up the code editing process, and even better, create customised commands to fit your own workflow.
Vim earns the award for the steepest learning curve and perhaps one of the worst user experiences overall, due to its complete lack of UI. Learning how to navigate Vim isn’t all that challenging, but building the muscle memory of shortcuts and figuring out how best to customise the editor (which you needs to do to get the best from this programme) takes a lot longer.
Vim is incredibly stable, fast, and a real joy to use for veteran command line aficionados and new, interested users alike. If you have the time to learn it, Vim can really increase your coding productivity, and it’s a nearly seamless cross-platform experience, with so little UI to consider.
Next page: More great code editors
- Price: Free
- Platform: Windows
It's been around for a long time now, but Notepad++ deserves a place on this list, because it can still compete with the best text editors around. This option is for Windows users only, and is still being actively updated. For no money whatsoever, you get a capable (if sometimes workmanlike) editor with plenty of features, and you can also mess about with the interface to suit your preferences. It's the work of Paris-based software engineer Don Ho.
07. GNU Emacs
- Price: Free
- Platform: Windows, OS X, Linux
There are various incarnations of Emacs but one of the most often-used is GNU Emacs; a free, extensible and customisable text editor. It's one of the most powerful editors out there and as such takes a while to learn your way around. Features include content-aware editing modes and full Unicode support for nearly all script types.
08. Komodo Edit
- Price: Free
- Platform: Windows, OS X, Linux
Komodo Edit is a powerful but basic code editor. It offers multi-language support, multiple selections and autocomplete, plus the ability to track changes or view a Markdown version. There's also a more fully featured IDE, which you'll need to pay for.
09. Buffer Editor
- Price: $8.99
- Platform: iOS
If coding on the go is your thing (and you're an Apple fan), Buffer Editor could be a great option for you. This iOS app is designed to make it easy to make quick changes to your website via your iPhone or iPad. It offers split view or fullscreen modes, and you can quickly switch between tabs. It also connects with BitBucket, GitHub, GitLab, Dropbox, iCloud ,Google Drive, SFTP, SSH and FTP servers.
10. CoffeeCup HTML Editor
- Price: Free version, or $49 (free trial available)
- Platform: Windows
CoffeeCup offers two different code editor options. There's a free version, which is great for beginners looking for a simple text editor. With it, you can create new HTML and CSS files from scratch or edit existing site files. Alternatively, there are a bunch of customisable responsive themes you can use to kick-start a new project. There's also a paid version, which includes a more features, such as HTML and CSS validation tools and a table designer.
- Platform: OS X
- Price: $99
Text editor Coda (now on version 2) is a OS X app that offers plenty of handy features. Alongside the usual code editor options, there are some interesting features – for example, Find and Replace includes a 'Wildcard' token that makes RegEx one-button simple, and Coda Pops enable you quickly create colours or gradients, using easy controls, as you type.
12. DroidEdit Pro
- Platform: Android
- Price: $2.49/£1.99
DroidEdit Pro is a slick code editor for Android tablets and phones. For the low price tag you get an app that looks great and works nicely for coding on the move. The simple interface gets out of the way, and the app supports syntax highlighting, bracket matching, Dropbox, and SFTP/FTP. There are also configurable shortcuts, to cut down on hunting and pecking on smaller Android device keyboards.
- Platform: iOS
- Price: $9.99
Textastic is a code editor aimed specifically at coding on the iPad (although there are iPhone and Mac versions). Along with all the usual bits and bobs you'd expect (FTP/SFTP support, local and remote preview, syntax highlighting), you get a handy additional row of keys on the virtual keyboard that provides fast access to regularly used characters. There's also TextExpander support for working with and expanding snippets.
Next page: How to choose the right code editor
What is a code editor?
Code editors are the bread and butter software of many developers, designers, and even writers. Complex integrated development environments (IDEs) are often too bloated and heavy for smaller tasks, such as working on a single project or file. On the other hand, basic text editors such as Notepad on Windows or TextEdit on macOS are underpowered for the tasks of editing code – too many necessary features are missing, making code editing cumbersome.
The interim type of software is the code editor. They shine at just this task, editing single files or single projects, managing a folder’s worth of content. Crucially, even the slowest of main code editors in the out list are still much faster and more responsive than dealing with a fully-fledged IDE.
Code editors often used to be very different on each operating system, but many of the editors in this list are cross-platform and work to ensure that the experience on different operating systems is very similar. This enables programmers to shift between work and personal computers, or even shared devices, and still get things done without having to adjust to a different environment.
In addition, many of the code editors here can have their behaviour modified via configuration option files (things like setting tab lengths, line lengths and wrapping, autocompletion, syntax highlighting, and more). This ability to dictate the program’s appearance and behaviour lets the programmer maximise the usefulness of the software, while the defaults enable a casual user to have a pleasant and useful ‘out of box’ experience.
How do you pick a code editor?
Picking a code editor can be a challenging task. Perhaps the most important thing to remember is that you know what you need. What features are most important to you? Keyboard shortcuts? Appearance? Speed? Stability? Cross-platform experience? Open source? Syntax highlighting options?
Consider what you would like your editor to do for you. Do you enjoy autocompletion of function names, or automatic closing brackets or tags? Or do you find those things frustrating? Do you put a lot of stock in the ability to change the colour scheme of your UI often and easily, or are you a big fan of a simple light or dark mode? Do you wish to perform Git operations directly from your editor?
The list of potential features is absolutely endless, and only you can say which are the ones that are the most important to you. Which make you more comfortable, efficient, and productive? Decide on your priorities, and then take a look around and find the editor software that ticks off all the boxes.
Another important note about choosing a code editor is to allow time to invest yourself in the software. Take a moment to look through the available settings, plugins, or other extensions. Find out which things you can change or set up to ensure that the experience is the best that it can possibly be for you. Getting your editor customised to your needs and spending some time with it will give you a real taste for whether it is to your liking or not.
This article was originally published in net, the world's best-selling magazine for web designers and developers. Subscribe now.
- A web designer's guide to CSS methodologies
- 5 breakout web design trends begging to go mainstream
from Creative Bloq http://www.creativebloq.com/advice/best-code-editors