Веб-разработка и верстка сайтов только кажется простой кому-то или очень сложной для других. Но в действительности существует огромное количество инструментария, которые одновременно упрощает работу с кодом и ускоряют её. Это все равно, что сравнить с веб-дизайном, для которого также существуют и отдельные приложения, наподобие Photoshop, и дополнительные сервисы по подбору шрифтов, иконок, картинок, той же цветовой палитры. И, разумеется, что редакторы кода являются одними из важнейших таких инструментов для веб-разработчиков.

Некоторых новичков одно только название способно ввести в «тихий ужас», и они уже боятся углубляться в тематику веб-верстки и работы с кодом. Да, сложные интегрированные среды разработки (IDE) действительно слишком крупные, широкие и большие, тогда как для верстки зачастую приходится решать куда более «мелкие» задачи по сравнению, например, с …. написанием кода нового графического редактора. С другой стороны, некоторые разработчики отдают предпочтение старым добрым приложениям  «Блокнот» в Windows или TextEdit на macOS или Notepad++. Но их обычно недостаточно для задач по работе с кодом, слишком много необходимых функций отсутствует, что делает эти приложения неудобными для верстки.

В этом материале мы рассмотрим особенности, плюсы и минусы некоторых известных кросс-платформенных редакторов кода для веб-разработчиков. Все они работают на трех основных операционных системах Windows, Linux и OS X. Функции каждого, которые могут быть необходимы разработчику, в основном будут зависеть от стиля работы, имеющихся знаний кодирования и вида работы.

Смысл редакторов кода для frontend-разработчика

Прошли те времена, когда frontend-разработчикам просто нужно было знать HTML, CSS и DOM-манипуляции. Кажется, никто уже не пишет «ванильный» CSS в наши дни. Но между тем, ES6 привнес легкость и интуитивность jQuery в «обычный JavaScript», который теперь является одним из самых популярных языков программирования в мире.

Чтобы быть веб-разработчиком и верстальщиком  в современности, JavaScript, jQuery, JSON и AJAX – требования, а знание библиотек и фреймворков, таких как Ionic, Ember, React и TypeScript частенько требуют особых навыков. Более того, разработчикам интерфейсов для сайтов или мобильных приложений также необходимо знать о системах контроля версий, таких как Git. Много всего? Но добавим, что новые библиотеки JS иногда появляются очень и очень часто, а потому у верстальщиков и веб-разработчиков желание учиться возникает также нередко. Направление Frontend развивается быстрыми темпами и часто проникает в другие области мобильных и backend-разработок и нужно идти в ногу с этим.

Вот поэтому и рассмотрим некоторые приложения для работы с программным кодом, с кодом верстки дизайна, программирования интерфейсов.

Angular

Angular – платформа, упрощающая сбор приложений. С его помощью разработчики получают возможность создавать приложения, которые могут «жить» в интернете в десктопных и мобильных вариантах. Разработанное Google приложение предназначено для создания одностраничных сайтов, в которых один документ HTML является контейнером для всех прочих подгружаемых модулей. В его возможностях – внедрение зависимостей, предоставление разного инструментария, методы отладки, множественные шаблоны.

Может использоваться для создания кросс-платформенных гибридных мобильных приложений с использованием Ionic или NativeScript, может создавать приложения для систем Mac и Linux, поддерживает TypeScript, позволяет создавать самые совершенные и прогрессивные веб-приложения.

Visual Studio Code

Наиболее полнофункциональный и хорошо созданный редактор от Microsoft на базе Atom представляет собой приложение с открытым исходным кодом (бесплатное). И именно этот редактор наиболее ярко представляет то, какой должна быть среда IDE. Он надежный, но медленно запускаемый. Хотя уже после запуска работает достаточно шустро, обрабатывает несколько задач одновременно. Еще есть интеграция с Git (встроенная), сортировка данных по папкам и так далее. Но если сравнить с тем же Atom’ом, он гораздо и гораздо шустрее и при запуске, и в работе, и функции их разнятся намного.

Так как приложение представляет собой open-source software, то и расширений, дополнений для него очень много, а пользовательская база растет и растет. Также имеется встроенная функция IntelliSense – помогающая автозавершить код, представляет информацию о параметрах, переменных. Еще из плюсов отметим встроенный отладчик для Node.js, TypeScript и JavaScript, интеграцию с TypeScript, полную настраиваемость. И самое главное – ничего общего с общеизвестным Visual Studio это приложение не имеет. Вообще. Никак. Кроме разработчика.

Минусы, конечно, и у него есть. Иногда он просто очень медленно осуществляет поиск по проектам. Не говоря о медленном запуске в целом.

Brackets

Эту платформу разработали уже в Adobe специально для веб-дизайнеров и frontend-разработчиков. Если вы работаете в основном только с HTML, CSS, JavaScript, то этот редактор может стать для вас основным и главным, поскольку его основная особенность – возможность установки связи с Google Chrome в режиме реального времени. Таким образом, разработчик может сразу видеть, как все изменения в проекте будут представлены в браузере.

Кроме того, в Brackets есть удобный редактор встроенных функций. Например, вы выбираете какой-то параметр CSS мышкой и нажимаете Ctrl + E (на Windows) или Cmd + E (на Mac), открывается редактор. В нем будут представлены все селекторы данного CSS ID и работать с кодом станет гораздо проще. Существует также и поддержка Sass и LESS, и все это может работать вместе с интеграцией предпросмотра.

Его легко настроить через меню, тогда как многие прочие приложение требуют отдельного редактирования файла конфигурации. Представляет интерес и дизайнерское решение, поскольку здесь нет вкладок для открытых файлов. Скорее, это отдельное меню файлов в левом верхнем углу над деревом файлов.

Например, тот же VS Code использует аналогичное меню открытых файлов, но еще обладает и вкладками.

Если говорить о минусах Brackets , то он выглядит запутанным, у него мало расширений, меньше чем предлагают любые другие на рынке редакторы кода и он совершенно не подходит для работы с «серверными языками» (PHP, Python, Ruby, и для WordPress).

Atom

Дошла очередь и до него. Он представляет собой тоже платформу с open-source code и создавался на GitHub. Изначально, он был вообще внутренним редактором исходного кода самого GitHub, но в 2014 году было решено представить его как отдельный пакет для общественности. И… он стал самым популярным для работы с кодом именно потому, что обладает большим набором функций.

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

И поскольку это open-source-приложение, то и для него есть множество расширений и надстроек от иных разработчиков. Например, Teletype предлагает возможность в режиме реального времени нескольким разработчикам работать одновременно над одним проектом. Но любят его (Atom) также и  за то, что создан он был с помощью HTML, JavaScript, CSS и Node.js.

Из минусов нельзя не сказать про очень медленную загрузку и разворачивание при запуске, иногда у некоторых пользователей случаются проблемы с производительностью (редкие). Но в целом это удобный и мощный редактор.

Sublime Text

Если точнее, то речь идет уже о третьем основном выпуске Sublime Text 3, который является тоже очень популярным редакторам для веб-разработки. И в отличие от прочих продуктов, он платный с бесплатным пробным периодом. Хотя, если бесплатный период закончится, вы сможете в нем работать и дальше, просто время от времени будет появляться всплывающее окошко с запросом на приобретение лицензии.

Итак… самая привлекательная особенность Sublime Text это –  Goto Anything, то есть вызов всех команд при нажатии клавиш Ctrl+P. Затем можно быстро открыть нужные файлы или перейти к нужным словам, строчкам, символам. У редактора есть и командная панель, с помощью которой можно получить доступ к различным функциям (проверка клавиш, цветовое оформление).

Sublime Text позволяет разделять экран редактирования кода и работать с каждыми частями по отдельности, существует поддержка множественного выбора (выделить несколько значений и все их заменить на одно общее, а не каждое выделять по отдельности и менять) и, конечно, большой пакет расширений. Редактор славится также очень высокой производительностью, гораздо более высокой, чем у всех прочих редакторов. В общем и целом, это весьма отзывчивый редактор.

Единственным минусом можно назвать сложность и кропотливость его интеграции с Git, но расширения уже есть и их много.

Light Table

И еще один редактор, мимо которого совершенно не хочется проходить. Это Light Table, относительно молодой и еще развивающийся редактор, впервые появившийся на Kickstarter в 2012 году. Он работает на трех платформах, но для OS X могут потребоваться дополнительные действия. Если говорить об интерфейсе, то он необычен, хотя есть поисковая строка и команда меню для настройки... Тем не менее, он поддерживает работу с HTML, CSS, JavaScript, Python, Clojure и ClojureScript.

Важная особенность редактора – функция Watches, которая позволяет отслеживать нужные вам значения в коде. Например, вы ставите маячок на какой-то кусочек кода, а затем все изменения будут передаваться в редактор в режиме реального времени. Также приложение распространяется с открытым кодом, а потому для него также создано много расширений и плагинов, а в самом Light Table есть встроенный менеджер.

Чем он интересен помимо функций?…Он быстр, настраиваем, бесплатен. Но минусы могут кому-то и не понравиться, так как до сих пор нет поддержки PHP, а, значит, разработки для WordPress (как минимум) вести в нем очень затруднительно. Но есть для этого плагин.

Обобщая вышесказанное

Так выглядят основные и самые популярные редакторы по работе с кодом для верстальщиков. У каждого есть свои преимущества, свои особенности и сказать, что: «Вот, писать код нужно только в чем-то одном» – не совсем верная мысль. Многие веб-разработчики используют несколько приложений и даже онлайн-ресурсы для удобства.

В то же время, несмотря на такую похожесть и одновременно различие всех редакторов друг от/на друга, каждый из них можно охарактеризовать несколькими словами, которые, возможно, немного обобщат и систематизируют все то, что мы пытались донести вам, читатели, в этом материале.

  • Sublime Text 3 – самый стабильный и быстрый редактор с пользовательским интерфейсом.
  • Visual Studio Code – самый полнофункциональный, хорошо скомпилированный и проработанный редактор.
  • Atom – бесплатная версия Sublime Text с более дружественным интерфейсом.
  • Adobe Brackets – самый простой редактор для новичков в верстке и программировании.
  • Light Table – простота и лаконичность, скорость и интересности.
  • Angular – самый нужный для приложений и любителей работать (анализировать) с данными.

Между тем, стоит отметить, что не менее важными бывают и такие ресурсы как PhpStorm, WebStorm, знакомый уже нашим читателям  по материалу о CSS – CodePen, всемирная «звезда» Notepad ++ и другие. И о некоторых мы еще поговорим в других материалах.

Завершение

Выбор редактора кода может стать очень сложной задачей. Возможно, что самое главное здесь – помнить, что вы уже знаете, с чем уже умеете работать, а с чем конкретно нет, и оно вам, возможно, и не нужно в данный момент. Стоит подумать над нужными функциями, горячими клавишами, интерфейсом, скоростью и стабильность, вариантами выделения синтаксиса. Для некоторых разработчиков последние пункты, порой, бывают важнее прочих.

Но, как и в случае, когда мы рассматривали преимущества Photoshop для веб-дизайна, также и для вёрстки с программированием нужно определить, что хочет верстальщик/разработчик, чтобы редактор мог для него сделать. Как вам удобнее взаимодействовать с Git, нравится автозаполнение имен функций или автоматические закрывающие скобки или теги. Еще одно важно – выделите время и изучите возможности каждого редактора и хотя бы в общем возможности расширений. Тогда сложится более целостная картина того, что вам нужно, и в чем было бы удобно написать и собрать весь код.

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