The best IDEs and text editors for the front-end developer

A dozen or two years ago, websites were made using hands and a regular text editor. Writing your own html tags, a little magic using inline styles in CSS, seasoned with entertaining animation - and the site is ready for use. Nowadays, creating and developing a website or application is a structured process. You can create a website using the website builder in a minute, or you can agonize over it for several months. As web development changes, new frameworks, plugins, and applications are emerging to streamline coding. Additional tools simplify your work environment and increase productivity. We use version control systems for collaborative open source project management and libraries like jQuery. The development environment plays a very important role in the process of creating a website. Choosing the ideal word processor can be a challenging but doable task that requires the application of empirical research. How not to get lost in this ocean of tools, applications and plugins? Which text editor should you choose for everyday work, and which one for pet projects? We have compiled a short list of the most popular tools for beginner frontend developers. Did we forget to mention your favorite editor in the article? Leave comments!

Notepad++

Release: November 24, 2003. The simplest text editor with syntax highlighting and tabs. Supports many programming languages ​​and technologies. Perfect for a beginner who has just stepped onto the slippery slope of web development. Possibilities:

• creating bookmarks;
• automatic copying and saving of created files;
• support and conversion of standard text encodings;
• users can independently set rules for syntax highlighting;
• installation of various useful plugins;
• setting and redefining hot keys;
• spell checking and text encryption;
• playing Tetris (in case you're tired of coding);
• can manage large volumes of data.

An additional “feature” of this editor is considered to be an “Easter egg” in the form of displaying quotes from the Dark Father – Darth Vader and the father of the “hate folder” – Bill Gates. The fly in the ointment: an overly simplified interface that does not meet today's development standards. It can be compared to the light of a flashlight during the day. Syntax highlighting: + Automatic tag detection: + OS compatibility: Windows, ReactOS. Free version: yes. Link: https://notepad-plus-plus.org/download/v7.5.1.html

Brackets

Released: November 4, 2014. Adobe has a lot of cool products that are beloved by Frontend developers and designers. And Brackets is one of them. This free, open-source, cross-platform editor is based on JavaScript, HTML5 and CSS3, so its work is focused specifically on them. If you have a basic understanding of JavaScript, then this is the editor you should start working with. Because it is he who will provide all the necessary tools for expansion. The editor needs some improvements, but overall it is being developed quite actively and is popular among developers. Moreover, each user can make their own changes and create additional extensions. Possibilities:

• tips for editing JS, CSS, and HTML files;
• support for viewing code in a browser in real time (Live Preview);
• synchronization with FTP server;
• support and automatic compilation of CSS into less files;
• provides a selection of fonts (with the possibility of adding them) that you can use when working with text;
• working with the version control system – Git.

The new version of 2017 introduced the ability to search through history, send and receive files with different encodings, navigate through the editing history using hotkeys, enable and disable extensions and a native menu for Linux. Syntax highlighting: + Automatic tag detection: + OS compatibility: macOS, Windows and Linux. Free version: yes. Link: http://brackets.io

Sublime

Release: January 18, 2008. Cross-platform code editor and integrated development environment (IDE). We loved this editor for its speed and ease of use, while Coda and TextMate fell by the wayside and disappointed the main user base with very inconvenient updates. Possibilities:

• fast navigation through files, symbols and certain sections of code (this is why it is loved by many users);
• The syntax checking function works immediately when you enter characters;
• optimization and repetition of recent actions using macros;
• automatic saving of the code, which prevents its loss;
• support for various visual themes and programming languages;
• saving frequently used keywords and code fragments;
• a set of ready-made plugins in Python;

Syntax highlighting: + Automatic tag detection: + OS compatibility: Windows, Mac OS, GNU/Linux. Free version: yes (without functional limitations), but after reviewing the application, you need to purchase a license. Link: http://www.sublimetext.com/3

WebStorm

Release: 2015. This is not an ordinary text editor, but also an integrated development environment for JavaScript, CSS & HTML. Its authors are JetBrains, the same company that created the IntelliJ IDEA environment, beloved by JavaRush students. WebStorm is one of the smartest and most popular editors. Supports the main frameworks: AngularJS, React and Meteor and is used to create an application on Node.js. WebStorm is quite a complex environment, but at the same time it is great for those who need a lot of extensions and features. Possibilities:

• Works effectively with projects of different sizes thanks to integration with version control systems Git, GitHub, Mercurial. This allows you to "commit" files, review changes, and resolve conflicts right within the IDE;
• LiveEdit - shows preliminary changes without reloading the page (works with the Google Chrome browser);
• code analysis during editing;
• refactoring and debugging code for Javascript and Node.js applications;
• support for ECMAScript, TypeScript, CoffeeScript and Dart languages;
• creating applications using the Node.js Express template;
• launching and debugging with frameworks like Mocha, Karma and Protractor. You can test it in the editor itself or in a convenient tree menu, from which you can quickly return to the text;
• LESS, Sass, SCSS, Stylus preprocessors are fully supported;
• quick search in the terminal window;
• structuring projects that involve multiple Javascript libraries;
• support for JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo and Bindows;
• initial support and work with Angular 2.

Syntax highlighting: + Automatic tag detection: + OS compatibility: Windows, Mac OS, GNU/Linux. Free version: There is a trial version for 30 days, then you need to purchase a license. Link: http://www.jetbrains.com/webstorm/

Atom

Release: February 26, 2014. Free open source software created by the authors of everyone's favorite Github . It is built on 50 modules and written in Node JS, CoffeeScript, CSS, HTML and C++. You can also develop your own modules and post them in a repository for open access. This development environment is quite easy to use, and additional plugins help expand the possibilities of working with it. Possibilities:

• uses GUI for configuration instead of json files;
• viewing a mini-map of the code and its fragments;
• quick search by projects and files;
• convenient sidebar and file tree;
• a huge number of extension packages available on Github;
• Emmet, Autoprefixer, Livereload support;
• viewing a file through the sidebar tree;
• the ability to customize the editor to individual user preferences;
• presence of a built-in file manager;
• there is no need to install a control package with plugins, it is enough to use the graphical user interface;
• support for plugins written in Node.js;
• preview PNG, JPEG images directly in the editor;
• offers work with the Git version control system.

The fly in the ointment may be that it requires a lot of memory and is not able to handle large data files. Syntax highlighting: + Automatic tag detection: + OS compatibility: Windows 7, 8, Mac OS 10.8, Linux. Free version: yes. Link: https://atom.io

Vim

Release: November 2, 1991. You may ask: what did old Vim forget in this list of modern editors? In fact, Vim is a completely modern and powerful text editor, created on the basis of the old vi, available on UNIX operating systems. And it is constantly evolving. Developers make changes almost every year, adding new plugins and add-ons. The last time this happened was in 2016, and the number of extensions and speed is truly amazing and worth checking out. Vim is a multi-mode editor. You can work in several at once: command, insert or visual. However, it is worth considering that it is quite complex for a novice developer. Although specialists with many years of experience are not aware of many of its functions. Possibilities:

• support for standard text encodings;
• you can work with several files at the same time;
• automatic recognition and conversion of files;
• compatibility with programming languages ​​Perl, Tcl, Python and Ruby;
• creating comfortable settings for the needs of each user;
• recording and implementing macros;
• visual mode can perform many useful functions (for example, highlighting blocks of text);
• support for non-standard languages ​​written from right to left (like Arabic or Hebrew);
• convenient settings for search words and command history;
• Supports full use of keyboard without mouse;
• demonstrates amazing performance when working with large files.

Syntax highlighting: + Automatic tag detection: + OS compatibility: Windows, DOS, Linux, BSD and Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. Free version: yes. Link: https://vim.sourceforge.io/download.php

Netbeans

Released: 1997. Free, open source IDE, sponsored by Oracle and supported by enthusiastic developers. It is constantly being developed and supplemented with various extensions for convenience and speed improvement. Possibilities:

• window and storage management;
• interface and design changes (including menus and pop-ups);
• setting up a connection with a remote server;
• Code refactoring available;
• there are add-ons, templates and code generators;
• supports many programming languages;
• automatic syntax checking and correction;
• customizing the editor to suit the user's needs;
• launching and debugging JavaScript and Node.JS applications;
• support for PHP frameworks (Symfony, Zend and Yii).

Fly in the ointment: it consumes a lot of memory. Syntax highlighting: + Automatic tag detection: + OS compatibility: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris and Solaris. Free version: yes. Only it is free. Link: https://netbeans.org

Hardcore bonus: Notepad, aka “Notepad”

Release: 1985, along with Windows 1.0. Yes, yes, the same Notepad that is installed by default on all your Windows computers. “What did this antiquity forget here, what does THIS have to do with development at all?” you ask. In fact, we understand that it is unlikely that anyone today will create anything serious in the classic Notepad. However, it is in this program that a lot of novice developers have spent the last 15-20 years “putting together” their first websites and writing their first programs. What we mean is that if you want to learn, nothing should stop you. For a real developer (and someone who wants to become one), Notepad is not a hindrance. Features: only black text, only hardcore. Fly in the ointment: no fly in the ointment: “Notepad” is perfect in its minimalism! Syntax highlighting: no. Train your memory! Automatic tag detection: wow! Free version: Notepad is only as free as your Windows.