December 8, 2015 5 best text editors for web developers

Written by Ruslan

“What is the best text editor for web developers?” — this questions bothers not only beginners but experienced developers as well. New software is launched regularly, client requirements are growing, your own skills are improving and you want to automate routine procedures for large projects and get as much as possible out of the box. In this article we talk about best text editors for web developers that currently exist out there.

Sublime Text (Windows, Linux, Mac)

This text editor for web developers is written in C++ and Python. It looks the same on all supported platforms thanks to using its own UI framework. Developers provide free trial version but for continuous usage you have to buy a license. The good thing is that a license is provided per user and not per device. Corporate discounts for buying several licenses are also available.

Main advantages of Sublime Text:

1. Ease of use. You can start working almost immediately after opening the program.
2. Quick and flexible search with fuzzy matches.
3. Multiple selection for entering identical text in several lines at once. For positioning cursor you use Ctrl + left mouse button or Ctrl + triple click with left mouse button for selecting the whole paragraph. You can also use keyboard for doing it, if you like.
4. Visual mini-map of your code. It can be useful for finding certain parts of code when working with large files.
5. Snippets for increasing work speed and a large amount of plugins for performing various tasks. The main of them is Package Control which is used for searching and installing all the necessary plugins from the editor itself.

Here’re few handy Sublime Text plugins:

Emmet allows you to use shortcuts for entering certain tags, for example:

ul#nav>li.item$*3>a{Item $}

Emmet transforms the shortcut above into a list with three elements:

<ul id="nav">
<li class="item1"><a href="">Item 1</a></li>
<li class="item2"><a href="">Item 2</a></li>
<li class="item3"><a href="">Item 3</a></li>
</ul>

SublimeLinter is used for syntax verification. It allows you to minimize the amount of errors by checking your code on the fly. You just need to install few packages, such as: SublimeLinter-html-tidy, SublimeLinter-csslint, SublimeLinter-jshint and SublimeLinter-php.

CSScomb helps to place CSS selectors in the right order for ease of future reading and editing.

As for the drawbacks, Sublime Text is sort of expensive ($70) and you can’t set it up via GUI (JSON configuration files are used for this purpose).

WebStorm (Windows, Linux, Mac)

WebStorm is not a simple editor, it’s an integrated development environment (IDE) written in Java. But since the difference between IDEs and editors with whole lot of plugins can be insignificant, we decided to include it too.

WebStorm has the following advantages:

1. Effective work with projects of any size thanks to the integration with version control systems including Git, Mercurial and Subversion.
2. JsTestDriver from Google that allows developers to improve code quality and follow TDD principles.
3. LiveEdit for immediate preview of changes without reloading the page.
4. Bulit-in features for checking code quality: JSHint, JSLint and Google Closure Linter.
5. Support of various technologies: TypeScript, CoffeeScript, Less, Sass, Stylus, Compass, EJS, Handlebars, Mustache, Web Components, Jade, Emmet, etc.

WebStorm is a great finding for those who need lots of features and are ready to pay for them: individual license is $59/1st year, corporate license — $129/1st year. But if you need something simpler, look at other text editors.

Atom (Windows, Linux, Mac)

Unlike the editors above, Atom is a free open source software. It is built on 50 modules and is written in C++, JavaScript, CSS and HTML. You can also add your own modules to the open repository so that others can use them too. It has all the basic functions available in Sublime Text (for example, quick fuzzy search in projects and files, code mini-map and snippets). It supports Emmet, Autoprefixer, Livereload and code autoformatting with atom-beautify.

Atom advantages compared to proprietary Sublime Text:

1. It uses GUI for settings instead of JSON files.
2. You don’t need to install Package Control in order to add plugins. Everything is done using GUI.

Brackets (Windows, Linux, Mac)

This open source text editor for web developers was created by Adobe. It has a simple set of useful features available in the abovementioned editors:

1. Changes are immediately shown in browser (Chrome is used for this purpose).
2. Multiple selection and editing.

Brackets also has a well-documented API for creating your own plugins and Extract for Brackets (Preview) function that speeds up the process of receiving data about color, fonts and sizes from PSD.

But Brackets slows down if you install too many plugins.

Coda (Mac OS и iOS)

TextMate and Coda are the most popular web text editors for Mac. We think that Coda is slightly better for web developers than TextMate since the latter is a multi-purpose editor. Coda is lightweight and equipped with all the necessary functions (like collapsing blocks of code, quick search and replace, autofill function for projects, Git and Subversion support) but it also has its own awesome features:

1. Remote file editing via FTP, SFTP, WebDAV or Amazon S3 servers.
2. Regular expressions search simplified with wildcard buttons.
3. Previewing with WebKit Preview and AirPreview. The latter allows you to use iPad or iPhone with Coda for iOS for previewing pages while you are working on them on your Mac.
4. In-build Terminal and MySQL editor.

Coda has its own plugins too but not as many as open source editors. For example, PHP & Web Toolkit plugin is quite popular due to the following features:

1. Automatic PHP syntax checker that switches to the next error and has autosave.
2. Organizing and reformatting code written in HTML, CSS, JavaScript or PHP.
3. HTML, CSS and JavaScript validation.
4. JavaScript and CSS minification.

One user license for Coda costs $99. But the more licenses you buy, the cheaper it gets. For example, 10 licenses cost $94 each.

As you can see, modern text editors for web developers have a lot of useful features so your personal choice will depend on the budget and your preferred platform. So which editor do you use for work or your personal projects? Tell us in the comment section below!

We at stfalcon.com are constantly keeping an eye on the latest trends in web design and development. When working with us you can be sure that your website is created according to the modern standards of web design and development.