5 лучших текстовых редакторов для веб-разработчиков

«Какой редактор все-таки лучше?» — этот вопрос задают себе как новички, так и те, кто уже давно занимаются веб-разработкой. Ведь всегда появляется что-то новое, изменяются требования заказчиков, повышаются собственные навыки, хочется автоматизировать рутинные процессы для больших проектов и получить как можно больше возможностей «из коробки». В этой статье мы собрали лучшие текстовые редакторы для веб-разработчиков на данный момент.

Sublime Text (Windows, Linux, Mac)

Sublime Text for web developers

Это текстовый редактор для веб-разработчиков, написанный на C++ и Python. Он выглядит одинакового на всех поддерживаемых платформах благодаря использованию собственного UI-фреймворка. Разработчики предоставляют бесплатную версию для ознакомления, но для продолжительного использования вам понадобиться приобрести лицензию. Бонус в том, что лицензия предоставляется на пользователя (per user), а не на устройство (per device). При покупке нескольких лицензий для компании также предоставляются скидки.

Основные преимущества Sublime Text:

  1. Простота использования — открыв Sublime Text, вы сможете практически сразу начать в нем работать.
  2. Быстрый и гибкий поиск с использованием нечетких совпадений.
  3. Возможность множественного выделения для ввода одинакового текста сразу в нескольких строках. Для установки позиции курсора нужно нажать Ctrl + левая клавиша мыши или Ctrl + тройной щелчок левой клавишей для выделения целого абзаца.
  4. Наличие визуальной мини-карты кода — она полезна при работе с большими файлами, так как позволяет быстро находить необходимые фрагменты:
  5. Возможность использовать сниппеты для ускорения работы и большое количество плагинов для самых разных задач. Главным из них можно считать Package Control, с помощью которого можно искать и устанавливать необходимые плагины прямо из редактора.

Вот несколько примеров плагинов:

Emmet — отличный плагин, который позволяет использовать шорткаты для ввода тех или иных тегов, например:

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

Emmet преобразует шорткат выше в список с тремя элементами:

<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 — плагин для проверки синтаксиса. Он позволяет минимизировать количество ошибок, на лету проверяя написанный код. Вам просто понадобиться установить нужные пакеты, например: SublimeLinter-html-tidy, SublimeLinter-csslint, SublimeLinter-jshint и SublimeLinter-php.

CSScomb — плагин, который помогает размещать CSS-селекторы в правильном порядке для простоты чтения и правки в будущем.

Что касается недостатков Sublime Text, то к ним можно отнести его стоимость (70 долларов), а также то, что настройка осуществляется не через GUI, а путем изменения json-конфигов.

WebStorm (Windows, Linux, Mac)

WebStorm for web developers

WebStorm — это не просто редактор, а интегрированная среда разработки (IDE), написанная на Java. Но поскольку разница между IDE и редакторами с большим количеством плагинов может быть незначительной, мы решили также включить его в этот список.

WebStorm обладает следующими преимуществами:

  1. Эффективная работа с проектами любого размера благодаря интеграции систем контроля версий, в том числе Git, Mercurial и Subversion.
  2. Увеличение качества кода и соблюдение принципов разработки через тестирование (TTD) благодаря использованию JsTestDriver от Google.
  3. LiveEdit для мгновенного просмотра изменений без перезагрузки страницы.
  4. Наличие встроенных возможностей для проверки качества кода — JSHint, JSLint, Google Closure Linter.
  5. Поддержка большого количества технологий: TypeScript, CoffeeScript, Less, Sass, Stylus, Compass, EJS, Handlebars, Mustache, Web Components, Jade, Emmet и другие.

WebStorm — находка для тех, кому нужно много различного функционала и кто готов за это платить: стоимость индивидуальной лицензии за первый год — 59 долларов, стоимость корпоративной лицензии за первый год — 129 долларов. Если же вам нужно что-то более простое, обратите внимание на другие редакторы.

Atom (Windows, Linux, Mac)

Atom for web developers

В отличие от двух предыдущих редакторов, Atom — продукт бесплатный, с открытым исходным кодом. Он собран из 50 модулей и написан на C++, JavaScript, CSS и HTML. Существует возможность добавлять собственные модули в открытый репозиторий, чтобы ими могли пользоваться другие. У него есть все те же базовые функции, что и у Sublime Text, вроде быстрого поиска нечетких совпадений в проектах и файлах, наличия мини карты, а также использование сниппетов. Он поддерживает упомянутый ранее Emmet, Autoprefixer, автоформатирование кода с помощью atom-beautify, Livereload.

Преимущества Atom по сравнению с платным Sublime Text:

  1. GUI-настройки вместо JSON-файлов.
  2. Для установки плагинов не требуется устанавливать Package Control, все делается из визуального интерфейса.

Brackets (Windows, Linux, Mac)

Brackets for web developers

Это текстовый редактор для веб-разработчиков от Adobe. Он обладает открытым исходным кодом и простыми, но нужными фичами, которые присутствуют в уже упомянутых редакторах:

  1. Мгновенное отображение изменений в браузере (Chrome).
  2. Множественное выделение и редактирование.

Бонус Brackets — это хорошо задокументированное API для создания собственных плагинов, также функция Extract for Brackets (Preview), благодаря которой ускоряется процесс получения данных о цвете, шрифтах и размерах из PSD.

Недостаток Brackets — невысокая скорость работы, если установлено много плагинов.

Coda (Mac OS и iOS)

Coda for web developers

TextMate и Coda — самые популярные текстовые веб-редакторы для Mac. Мы считаем, что Coda все таки больше подходит для веб-разработчиков, чем TextMate, который задумывался как универсальный продукт. Coda — это легковесный редактор со всеми нужными функциями (вроде сворачивания блоков кода, быстрого поиска и замены, функции автозаполнения для проекта, поддержки Git и Subversion), но при этом он имеет и собственные фишки:

  1. Возможность удаленно редактировать файлы по FTP, SFTP, WebDAV или на серверах Amazon S3.
  2. Упрощенный поиск с помощью регулярных выражений благодаря wildcard-кнопкам.
  3. Предпросмотр WebKit Preview и AirPreview. Последний позволяет использовать iPad или iPhone с версией Coda для iOS для предпросмотра страниц в то время, когда вы верстаете их на своем настольном компьютере.
  4. Встроенный Terminal и редактор MySQL.

Есть у Coda и собственные плагины, но, разумеется, их не так много, как у редакторов с открытым исходным кодом. Многие хвалят плагин PHP & Web Toolkit, в котором имеется:

  1. Автоматическая проверка PHP-синтаксиса с переходом к следующей ошибке и автосохранением.
  2. Упорядочивание, переформатирование кода, написанного на HTML, CSS, JavaScript или PHP.
  3. Валидация HTML, CSS и JavaScript.
  4. Минификация JavaScript и CSS.

Стоимость лицензии Coda для одного пользователя — 99 долларов.

Как видим, функционал современных редакторов достаточно обширен, поэтому выбор зависит от используемой платформы, а также от финансовых возможностей. А какой редактор для веб-разработки предпочитаете вы?

Сотрудники студии stfalcon.com всегда следят за последними тенденциями веб-дизайна и разработки. Выбрав нас в качестве своего партнера, вы можете быть уверены, что ваш сайт будет отвечать современным стандартам веб-дизайна и разработки.

Об авторе

Frontend разработчик
Руслан отвечает за HTML, CSS и JavaScript на проектах студии.

Похожие статьи

Вернуться к списку записей К списку записей