Лучшие IDE и текстовые редакторы для «фронтендщика»

Десяток-другой лет назад веб-сайты делали с помощью рук и обычного текстового редактора. Самостоятельное прописывание тегов html, немного волшебства с помощью инлайновых стилей в CSS, приправленные занимательной анимацией — и сайт готов к эксплуатации. Сейчас создание и развитие веб-сайта или приложения – это структурированный процесс. Сайт можно создать с помощью конструктора за минуту, а можно мучится над ним несколько месяцев. По мере того как меняется веб-разработка, появляются новые фреймворки, плагины и приложения для оптимизации написания кода. Дополнительные инструменты упрощают рабочую среду и повышают производительность. Мы используем системы контроля версий для совместного управления проектами с открытым исходным кодом и библиотеки, наподобие jQuery. Среда разработки играет очень важную роль в процессе создания сайта. Выбор идеального текстового редактора может быть сложной, но выполнимой задачей, которая требует применения эмпирического исследования. Как не потеряться в этом океане инструментов, приложений и плагинов? Какой текстовый редактор выбрать для повседневной работы, а какой для pet-проектов? Мы составили небольшой список самых популярных инструменты для начинающих frontend-разработчиков. В статье мы забыли упомянуть ваш любимый редактор? Оставляйте комментарии!

Notepad++

Релиз: 24 ноября 2003. Самый простой текстовый редактор с подсветкой синтаксиса и вкладками. Поддерживает множество языков программирования и технологий. Отлично подойдёт начинающему специалисту, который только-только ступил на скользкую дорожку веб-разработки. Возможности:

• создание закладок;
• автоматическое копирование и сохранение созданных файлов;
• поддержка и конвертация стандартных кодировок текста;
• пользователи самостоятельно могут установить правила подсветки синтаксиса;
• установка различных полезных плагинов;
• настройка и переопределение «горячих» клавиш;
• проверка орфографии и шифрование текста;
• игра в тетрис (на случай, если вы устали кодить);
• может управлять большими объёмами данных.

Дополнительной «фичей» этого редактора считается «пасхалка» в виде отображения цитат Тёмного Отца – Дарта Вейдера и отца «папки ненависти» — Билла Гейтса. Ложка дёгтя: слишком упрощённый интерфейс, который не соответствует сегодняшним стандартам разработки. Его можно сравнить со светом карманного фонарика днём. Подсветка синтаксиса: + Автоматическое определение тегов: + Совместимость с ОС: Windows, ReactOS. Бесплатная версия: да. Ссылка: https://notepad-plus-plus.org/download/v7.5.1.html

Brackets

Релиз: 4 ноября 2014. У Adobe есть много классных продуктов, горячо любимых Frontend-разработчиками и дизайнерами. И Brackets — один из них. Этот бесплатный кроссплатформенный редактор с открытым исходным кодом основан на JavaScript, HTML5 и CSS3, поэтому в работе ориентирован именно на них. Если у вас есть базовое понимание JavaScript, то именно с этого редактора нужно начинать работу. Потому что именно он предоставит все необходимые инструменты для расширения. Редактор нуждается в некоторых доработках, но в целом достаточно активно развивается и пользуется популярностью у разработчиков. Причём каждый пользователь может внести свои изменения и создать дополнительные расширения. Возможности:

• подсказки при редактировании JS, CSS, и HTML-файлов;
• поддержка просмотра кода в браузере в реальном времени (Live Preview);
• синхронизация с FTP-сервером;
• поддержка и автоматическая компиляция CSS в less–файлы;
• предоставляет выбор шрифтов (с возможностью их дополнения), которые вы можете использовать при работе с текстом;
• работа с системой контроля версий – Git.

В новой версии 2017 года появилась возможности поиска по истории, отправка и принятие файлов с различными кодировками, переход по истории редактирования с помощью горячих клавиш, включение и отключение расширений и родное меню под Linux. Подсветка синтаксиса: + Автоматическое определение тегов: + Совместимость с ОС: macOS, Windows и Linux. Бесплатная версия: да. Ссылка: http://brackets.io

Sublime

Релиз: 18 января 2008. Кроссплатформенный редактор кода и интегрированная среда разработки (IDE). Полюбили этот редактор за скорость и лёгкость в использовании, в то время, как Coda и TextMate оказались на обочине и разочаровали основную базу пользователей весьма неудобными обновлениями. Возможности:

• быстрая навигация по файлам, символам и определённым участкам кода (именно за это и любима многими пользователями);
• функция проверки синтаксиса срабатывает сразу же при введении символов;
• оптимизация и повторение последних действий при помощи макросов;
• автоматическое сохранение кода, которое предотвращает его потерю;
• поддержка различных визуальных тем и языков программирования;
• сохранение часто используемых ключевых слов и фрагментов кода;
• набор готовых плагинов на Python;

Подсветка синтаксиса: + Автоматическое определение тегов: + Совместимость с ОС: Windows, Mac OS, GNU/Linux. Бесплатная версия: есть (без функциональных ограничений), но о после ознакомления приложение требует приобрести лицензию. Ссылка: http://www.sublimetext.com/3

WebStorm

Релиз: 2015. Это не обычный текстовый редактор, а и интегрированная среда разработки для JavaScript, CSS & HTML. Её авторы — компания JetBrains, та самая, что создала любимую студентами JavaRush среду IntelliJ IDEA. WebStorm является одним из самых «умных» и популярных редакторов. Поддерживает основные фреймворки: AngularJS, React и Meteor и служит для создания приложения на Node.js. WebStorm достаточно сложная среда, но при этом она отлично подходит тем, кому необходимо множество расширений и «фич». Возможности:

• эффективно работает с проектами разного размера благодаря интеграции с системой контроля версий Git, GitHub, Mercurial. Это позволяет «коммитить» файлы, просматривать изменения и разрешать конфликты прямо в IDE;
• LiveEdit - показывает предварительные изменения без перезагрузки страницы (работает с браузером Google Chrome);
• анализ кода по ходу редактирования;
• рефакторинг и отладка кода на Javascript и Node.js приложений;
• поддержка языков ECMAScript, TypeScript, CoffeeScript и Dart;
• создание приложений с помощью шаблона Node.js Express;
• запуск и отладка с фреймворками вроде Mocha, Karma и Protractor. Тестить можно в самом редакторе или в удобном древовидном меню, из которого можно быстро вернуться обратно к тексту;
• полностью поддерживаются предпроцессоры LESS, Sass, SCSS, Stylus;
• быстрый поиск в окне терминала;
• структуризация проектов, в которых задействована несколько библиотек Javascript;
• поддержка JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo и Bindows;
• начальная поддержка и работа с Angular 2.

Подсветка синтаксиса: + Автоматическое определение тегов: + Совместимость с ОС: Windows, Mac OS, GNU/Linux. Бесплатная версия: Есть пробная версия на 30 дней, потом требуется приобрести лицензию. Ссылка: http://www.jetbrains.com/webstorm/

Atom

Релиз: 26 февраля 2014. Бесплатное программное обеспечение c открытым исходным кодом, созданное авторами всеми любимого Github. Он построен на 50 модулях и написан на Node JS, CoffeeScript, CSS, HTML и C++. Вы также можете разрабатывать свои модули и выкладывать их в репозиторий в открытый доступ. Эта среда разработки достаточно проста в использовании, а дополнительные плагины помогают расширить возможности работы с ним. Возможности:

• использует GUI для настройки вместо json файлов;
• просмотр мини-карты кода и его фрагментов;
• быстрый поиск по проектам и файлам;
• удобная боковая панель и дерево файлов;
• огромное количество пакетов расширений доступных на Github;
• поддержка Emmet, Autoprefixer, Livereload;
• просмотр файла через дерево боковой панели;
• возможность настроить редактор под индивидуальные предпочтения пользователя;
• наличие встроенного файлового менеджера;
• нет потребности устанавливать контрольный пакет с плагинами, достаточно использовать графический интерфейс пользователя;
• поддержка плагинов, написанных на Node.js;
• предварительный просмотр изображений PNG, JPEG непосредственно в редакторе;
• предлагает работу с системой управления версиями Git.

Ложкой дёгтя может стать то, что он требует много памяти и не способен обрабатывать большие файлы данных. Подсветка синтаксиса: + Автоматическое определение тегов: + Совместимость с ОС: Windows 7, 8, Mac OS 10.8, Linux. Бесплатная версия: да. Ссылка: https://atom.io

Vim

Релиз: 2 ноября 1991. Вы можете спросить: что в этом списке современных редакторов забыл «олдовый» Vim? На самом деле, Vim – вполне современный и мощный текстовый редактор, созданный на базе старого vi, доступного в ОС семейства UNIX. И он постоянно развивается. Разработчики практически ежегодно вносят изменения, добавляя новые плагины и надстройки. В последний раз это произошло в 2016 году, а количество расширений и скорость действительно поражают и заслуживают внимания. Vim — многорежимный редактор. Вы можете работать сразу в нескольких: командном, вставки или визуальном. Однако стоит учесть, что он достаточно сложный для начинающего разработчика. Хотя и специалисты с многолетним стажем не подозревают о многих его функциях. Возможности:

• поддержка стандартных кодировок текста;
• можно работать с несколькими файлами одновременно;
• автоматическое распознавание и преобразование файлов;
• совместимость с языками программирования Perl, Tcl, Python и Ruby;
• создание комфортных настроек под нужды каждого пользователя;
• запись и реализация макросов;
• визуальный режим может исполнять множество полезных функций (например, выделения блоков текста);
• поддержка нестандартных языков с письмом справа налево (вроде арабского или иврита);
• удобная настройка по поисковым словам и истории команд;
• поддерживает полное использование клавиатуры без мышки;
• в работе с большими файлами демонстрирует удивительную производительность.

Подсветка синтаксиса: + Автоматическое определение тегов: + Совместимость с ОС: Windows, DOS, Linux, BSD и Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. Бесплатная версия: да. Ссылка: https://vim.sourceforge.io/download.php

Netbeans

Релиз: 1997. Бесплатная IDE с открытым исходным кодом, спонсируемая Oracle, которую поддерживают разработчики-энтузиасты. Постоянно развивается и дополняется различными расширениями для удобства и улучшения скорости работы. Возможности:

• управление окнами и хранением данных;
• изменение интерфейса и дизайна (включая меню и всплывающие окна);
• настройка соединения с удалённым сервером;
• доступен рефакторинг кода;
• существуют дополнения, шаблоны и генераторы кода;
• поддерживает множество языков программирования;
• автоматическая проверка и исправление синтаксиса;
• настройка редактора под потребности пользователя;
• запуск и отладка JavaScript и Node.JS приложений;
• поддержка фреймворков PHP (Symfony, Zend и Yii).

Ложка дёгтя: потребляет много памяти. Подсветка синтаксиса: + Автоматическое определение тегов: + Совместимость с ОС: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris и Solaris. Бесплатная версия: да. Только бесплатная и есть. Ссылка: https://netbeans.org

Хардкорный бонус: Notepad, он же — «Блокнот»

Релиз: 1985 год, вместе с Windows 1.0. Да-да, тот самый «Блокнот», который установлен по умолчанию во всех ваших Windows-компьютерах. «Что тут забыла эта древность, какое отношение ЭТО вообще имеет к разработке?», —спросите вы. На самом деле мы понимаем, что вряд ли кто-то сегодня будет создавать что-то серьезное в классическом «Блокноте». Тем не менее, именно в этой программе масса начинающих разработчиков последние лет этак 15-20 «верстала» свои первые сайты и писала свои первые программы. Это мы к тому, что, если вы хотите учиться, вас ничто не должно останавливать. Настоящему разработчику (и тому, кто хочет им стать) — и «Блокнот» не помеха. Возможности: только чёрный текст, только хардкор. Ложка дёгтя: никакого дёгтя: «Блокнот» идеален в своем минимализме! Подсветка синтаксиса: нет. Тренируйте память! Автоматическое определение тегов: ну что вы! Бесплатная версия: «Блокнот» бесплатен ровно настолько, насколько бесплатна ваша Windows.