The best Code Editors

Thanks to DIY solutions such as website builder kits, users are now able to build a simple website without needing special programming skills. These tools allow users to select ready-to-use design templates and user interface components, which can be dragged and dropped into position while the underlying source code is automatically generated. However, when it comes to developing professional websites, programmers with expertise in HTML, CSS and JavaScript are still as in demand as ever. In contrast to website builder projects, professionally-built pages are known for being highly individualised as well as for having a clean and readable source code.

A code editor is without a doubt the most important tool for any web developer. It includes the essential functions and provides a highly comfortable user experience without being overly bloated with unnecessary features. There are different HTML code editors for each operating system (e.g. Windows, macOS and Linux).

Classic code editors provide a kind of intermediate solution in comparison to simple text editors and complex IDEs (Integrated Development Environments). The former are differentiated by their extended functionality, while the latter include multiple tools for software development, which are interconnected. A code editor is usually also integrated into these complex development environments, but it is just one of many components.

There are also differences among code editors. This is due in particular to the large number of markup and programming languages out there. For example, there are editors, which are particularly good for working with C++, Java or Python, while others are specifically designed for web development and design. These editors have to be able to at least write and edit as well as simplify code in the following languages: HTML, CSS and JavaScript. One of the most common features of web code editors is a mode called WYSIWYG (what you see is what you get) which lets developers see in advance how the code will later be displayed in the browser.

Other characteristics of a good code editor for Mac and the like include:

• the ability to save projects in any character encoding,
• syntax highlighting for various languages (ideally configurable),
• a flexible “find and replace” function which can also handle regular expressions,
• a show and hide function for logically related blocks of code (i.e. code folding),
• autocomplete for code (e.g. words, functions, parameters),
• a macro editor and
• the ability to easily manage complete code snippets.

Code editors are very simple programs, which require little disk space and do not require much in terms of system performance. Therefore, choosing which device or operating system to run the programs on primarily depends on user preference. Of course, not every code editor can run on all operating systems which is why the options are limited if you are exclusively looking for a Linux code editor, for example. As with other software, there are also differences between proprietary software, open source solutions and freeware. This is why the cost is often taken into account when deciding whether or not to use a web code editor.

To simplify your search for the right code editor for your web project, the following sections will go over the most important examples for each operating system as well as some cross-platform solutions.

There are a number of editors, which can be used on different platforms. When this is the case, the developer will offer different installation files for each operating system so that all you have to do is select the appropriate file to install the program on Windows, macOS or Linux. However, they may differ based on the operating system, so certain functions might only be available to Linux users, for example.

Due to its strong extensibility, GNU Emacs offers not only access to the standard tools found in a code editor such as autocomplete and syntax highlighting but also, if needed, access to features, which go well beyond writing and editing text and code. For example, you can add an audio player, a project planner and even a web server to the program. A special feature, and a cornerstone, of this editor is the use of keyboard shortcuts, which can be learned quite quickly. Additionally, you can also use a mouse with Emacs.

Brackets offers the most important code editor functions from the get-go: Code syntax is automatically highlighted. Brackets also provides recommendations for parameters and automatically closes brackets. The “find" tab allows you to search all open code documents for specific words or blocks of code and automatically “replace” the corresponding items if needed. In addition, you can see what your web project looks like in its current state of completion using the “live preview” function. If you wish to extend the functionality of the code editor for Mac, Windows and Linux, simply use the integrated Extension Manager.

Atom is closely connected to GitHub. This is why the code editor offers, among other things, the possibility to create a GitHub directory for your project without having to visit the developer platform. You can also use the Git version control system to keep track of all changes to the code, test them, and undo the changes if necessary. Other basic features of the software include syntax highlighting, automatic language recognition, code folding, autocomplete for text or code and the ability to find and replace terms, expressions, and blocks of code throughout the project.

Web development has always been closely associated with UNIX and Linux. Important web tools and software such as the Apache web server are a part of the standard repertoire for nearly all distributions of this operating system family. Furthermore, many users find that the administrative freedom they have is a significant advantage over Windows. Nevertheless, Microsoft systems also have a significant user base when it comes to programming and managing a new website. This is clearly demonstrated by the fact that there are code editors developed exclusively for Windows.

Notepad++ already offers the basic features of a good HTML code editor in the factory settings. You can use syntax highlighting for various languages, and you have the option of defining the highlighting rules. This also applies to grouping related blocks of code. In addition, Notepad++ provides a “find and replace” function as well as a function to record and play back macros and an autocomplete feature (words, functions, parameters). If the browsers are installed, HTML documents created in Notepad++ can be previewed at any time in Firefox, Chrome, Safari or Internet Explorer.

Quick clips allow you to add common elements and parameters (e.g. tables, colours or bolding) to your code documents in Araneae with just a single click or via a hotkey, making coding much easier. If you want to check whether your code works, you can use the integrated preview function to preview the current document in the browser of your choice.

macOS, the operating system used by Apple devices such as iMacs and MacBooks, is popular among many app and web developers. This is due in particular to the fact that the operating system natively supports various UNIX development tools as a BSD (Berkeley Software Distribution) derivative. Another reason to develop web applications on a Mac is the fact that Apple devices tend to be high-performing. On top of that, apps for iOS can only be programmed from a macOS device.

The Japanese software company Panic released Coda, a code editor for Mac computers, in 2007. In addition to the desktop application, which you can purchase on Panic’s website for $99 (around £75) after a one-week free trial period, there is also an app for iOS which Panic offers for $24.99 (around £20) on the App Store. Coda includes the basic functions of a code editor. On top of syntax highlighting for various languages, project-wide autocomplete and a quick “find and replace” function, the program also offers the ability to show and hide code as well as to add comments. Extensions can be added to Coda at any time via plug-ins, most of which are community developed.

To ensure the best possible user experience, Coda has features, which go above and beyond those of an average HTML code editor. The software has its own integrated file management system which simplifies the process of opening and editing local files and makes it possible to access files via (S)FTP, WebDav or Amazon S3 server. Thanks to Git and Subversion support, Coda also lets you track all changes made to your documents at any time. Additional extras include a built-in terminal, an HTML validator as well as a MySQL editor. The code editor for Mac also offers a preview function using WebKit Preview or AirPreview.

Of all the code editors for Mac, BBEdit is certainly one of the oldest. This proprietary editor solution was first released by the American company Bare Bones Software in 1992 for the OS X and macOS predecessor Macintosh System Software 6. Since then the software has been receiving steady updates making it one of the most popular code editors for Mac users despite having been around for more than two decades. In addition to the paid licensed version, which costs around $50 (around £38), Bare Bones Software offers an unlicensed demo version with limited functionality, which can be used free of charge and upgraded at any time. Up until 2016, the manufacturer offered a separate code editor called TextWrangler (formerly called BBEdit Lite), but support for it has since been discontinued.

BBEdit offers a balanced mix of basic code editor functions and additional features, which make web developers’ work much easier. It includes syntax highlighting for various languages, autocomplete, a multi-document “find and replace” function, code folding as well as file access via (S)FTP, support for Git and Subversion and a comprehensive set of HTML and CSS markup tools (including support for HTML5). If you want to see a live preview of the code, you can use the integrated WebKit Inspector which is also standard. BBEdit is also good for debugging. You can detect spelling mistakes directly in the code editor with the macOS correction function while you are debugging the code for your HTML pages with the HTML syntax checker.

DroidEdit can be downloaded from the Google Play Store. There are two different versions of the code editor for Android: DroidEdit Free can be used completely free of charge, but it contains advertisements. DroidEdit Pro is a paid product (just over two dollars/£1.50), but it features support for the Git version control system among other things. Upon purchasing the app, you will also have access to (S)FTP support as well as access to interfaces for the online storage services Dropbox, Google Drive and Box.