Персональный блог Игоря Антонова aka "spider_net"

Золотой фонд веб-разработчика. Самые полезные плагины для Atom и VS Code


Рубрика: JavaScript -> Программирование -> Журнал Хакер -> Статьи
Метки: | | | |
Просмотров: 3330
Золотой фонд веб-разработчика. Самые полезные плагины для Atom и VS Code

Текстовые редакторы, созданные на основе web-технологий, переживают настоящий бум. Atom, VS Code, Brackets, подобно монстрам рока, завоевывают популярность среди web-разработчиков (погоди, какой там сейчас на календаре год у «популярных монстров рока»? :-) — Прим. ред.). На них переходят как с IDE, так и просто с нативных редакторов. Причина предельно проста: репозитории кишат полезными плагинами, а недостающие каждый может создавать самостоятельно, применяя сугубо web-технологии.

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

На вкус автора

Ваш покорный слуга использовал все перечисленные редакторы и в итоге остановился на VS Code. Причин тут несколько, но главная — производительность. В Microsoft отлично постарались и, несмотря на поздний выход (VS Code появился на сцене последним), успели собрать вокруг себя огромное сообщество. Это положительно отразилось на плагинах: некоторые из них, на мой взгляд, на голову выше альтернатив для Atom. В связи с этим в тексте обзора будут мелькать названия расширений именно для VS Code. Ссылка на приближенный по функциональности вариант для Atom будет приведена ниже. Не удивляйся, если, скопировав название плагина и запустив поиск по репозиторию Atom, ты ничего не найдешь. Используй ссылки из описания.

Причины популярности

Редакторы, построенные на веб-технологиях, имеют приблизительно одни и те же проблемы. Одна из основных — производительность. Разработчики трудятся над скоростью работы редакторов, но будем честными — с этой проблемой вряд ли удастся справиться на 100%. Нативные решения по-прежнему обгоняют в быстродействии, и это стоит учитывать при выборе редактора.

Ну хорошо, производительность нативных решений вне конкуренции. За счет чего тогда новоиспеченные «легковесные» редакторы покорили столько сердец разработчиков? Главный аргумент «за» — технологический стек. Что значит разработать плагин для какого-нибудь Sublime или Notepad? Правильно, придется разобраться с C, Python (здесь может быть любой другой язык программирования), SDK редактора и другими не нужными по основной работе вещами.

Какой веб-разработчик согласится на этот подвиг? У него своих забот и технологий хватает (во фронтенде происходит настоящая революция решений). Вот и получилось, что экосистема плагинов для веб-разработчиков у нативных редакторов всегда страдала нехваткой профильных решений.

Идея создания редакторов на веб-технологиях для мастеров этих же технологий эффективно решила проблему бедной экосистемы сторонних модулей. Сторонние веб-разработчики быстро подхватили волну и приступили к созданию необходимых им примочек. Результаты нетрудно проследить — официальные репозитории набиты плагинами для самых разнообразных задач. Создавать новые плагины стало проще: больше не надо учить чужеродный язык программирования, JavaScript вполне достаточно.

К сожалению, за легкость доработки функциональности редактора приходится платить производительностью и ресурсами. Легковесные редакторы зачастую требуют больше системных ресурсов и не готовы помериться силами с нативными в быстродействии. За время тестирования Atom с джентльменским набором расширений умудрялся обогнать по потреблению памяти WebStorm.

Сниппеты

Плагины-сниппеты — отдельный класс расширений для редакторов. Они пользуются дикой популярностью, и практически под каждый современный фреймворк или библиотеку в репозиториях есть индивидуальное предложение. Сниппеты экономят время. Требуется описать заготовку класса? Нет проблем, вводим пару символов и получаем несколько строк готового кода. Подробно разбирать плагины-сниппеты смысла нет — их слишком много. Приведем несколько ссылок на плагины-сниппеты по популярным технологиям. Недостающие найдешь сам.

VS Code:

Atom:

Плагины-сниппеты

Обертка для HTML

При описании разметки страницы постоянно приходится оборачивать блоки, то есть вкладывать один блок в другой. Написал разметку блока, а потом понял, что для удобства стилизации лучше обернуть его в дополнительный блок. Сделать несложно: пишем открывающий тег в самом начале, проматываем блок до конца и ставим закрывающий тег. Есть только одна проблема — на больших блоках это делать неудобно. Есть все шансы поставить «закрывашку» не туда и поломать разметку. Аналогичная проблема появляется при стилизации отдельных кусков текста. Попробуй быстро вставить многочисленные открывающие и закрывающие теги и не сойти с ума. Справиться с трудностями помогут плагины htmltagWrap и Atom wrap in tag. С их помощью решение сведется к выделению куска кода/строки и нажатию комбинации горячих клавиш.

VS Code: htmltagwrap

Atom: Atom wrap in tag

Привыкаем к горячим клавишам

При переходе на новый редактор/IDE всегда сталкиваешься с одной и той же проблемой — надо учить новые горячие клавиши. Только привык к одним комбинациям, как бац — и все по-другому. На привычные действия начинаешь тратить больше времени, чем обычно, и лишний раз задумываешься, целесообразно ли вообще переходить на что-то новое. Уверен, разработчики, кто начинал свою карьеру 10–15 лет назад, неоднократно сталкивались с подобным, поэтому они однозначно оценят мощь плагинов с биндингами клавиш популярных редакторов. Суть проста: привык к раскладке горячих клавиш Visual Studio — качаешь соответствующий плагин, и новый редактор начинает отзываться на привычные команды.

VSCode

Atom

Автокомплит для файлов

По умолчанию ни один из редакторов не предоставляет функции автозавершения имен файлов во время их подключения. Часто это бывает причиной ошибок. Приходится помнить полный путь к месторасположению файла. Если проект сложней, чем Hello world, то файлы сгруппированы по нескольким директориям, и для указания пути придется пользоваться услугами менеджера файлов. Не очень удобно. Проще подключить автокомплит с помощью плагинов AutoFileName и autocomplete+. Затем останется только набирать первые буквы имени файла/директории, после чего плагин предложит варианты для подстановки.

VS Code: AutoFileName

Atom: autocomplete+ paths suggestions

Autofilename

Линтеры

Современный процесс разработки немыслим без автоматизации. Если что-то можно автоматизировать и переложить на инструменты — это стоит сделать. Без всевозможных линтеров во фронтенде никуда, поэтому при работе над очередным проектом надо сразу позаботиться о подключении решений вроде ESLint, HTMLHint, CSSLint, <твой_линтер>. Линтеры контролируют стиль написания кода и в случае несоответствия конфигу моментально укажут на ошибки.

Особенно полезны линтеры в командной разработке, когда шансы получить «разношерстный» код увеличиваются в разы. Нужны примеры? Пожалуйста! Между JS-разработчиками постоянно идет спор о выборе кавычек. Одни — приверженцы одинарных, другие — двойных, а третьи поддерживают идею обратных. Линтеры помогут добиться единообразия и вовремя оповестить разработчика, сбившегося с пути.

VS Code:

Atom:

Сам себе генератор

Во время разработки всегда требуются наборы сгенерированных данных, будь то набор случайных чисел, email, IP-адресов и прочее. Стоит ли говорить, что самостоятельная заготовка перечисленного добра — занятие не из приятных. Упростить дело помогут два интересных расширения: VSCode-random и Random.

Расширение включает в себя несколько генераторов случайных данных, их количество от версии к версии пополняется. Прямо сейчас доступны генераторы, позволяющие получить: случайные числа, случайные числа из заданного диапазона, валидные email, IPv4/IPv6, названия стран, URL-адреса, цвета, имена людей, названия улиц… Перечисленные плагины ориентированы в первую очередь на JavaScript-разработчиков, а если твоя работа связана лишь с версткой, то тебе пригодится генератор Lorem ipsum, позволяющий быстро формировать заготовки шаблонного текста.

VS Code:

  • VSCode-random
  • Lorem ipsum

Atom:

  • Random
  • Lorem ipsum

Менеджер проектов

В Atom и VS Code, в отличие от IDE, такая сущность, как проект, не применяется. Мы просто работаем с файлами в определенных директориях. Если говорить еще точнее, то «проект» в перечисленных редакторах — корневая директория. К сожалению, из коробки в редакторах отсутствует возможность быстрого переключения между ними. Когда в работе сразу несколько проектов, переключаться между ними долго и неудобно. Плагин Project Manager добавит недостающую функциональность.

VS Code: Project Manager

Atom: Project Manager

Project Manager

Подсветка для скобок

Мало что может так запутать разработчика, как вложенные скобки. Взгляни на код:

runMyFunc(foo(1, foo2())();

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

VS Code: Bracket Pair Colorizer

Atom: nms-color-bracket package

Подсветка скобок

Автокомплит для npm

Чуть выше мы рассмотрели плагин для автокомплита имен файлов (AutoFileName), а есть точно такой же, только для модулей из npm (npm Intellisense). Идея проста: начинаем писать первые символы названия модуля и получаем варианты для автокомплита. При активной разработке под Node.js вещь незаменимая.

VS Code: npm Intellisense

Atom: npm-autocomplete package

Эксперименты над регистром

Во время ревью кода начинающих разработчиков с завидной регулярностью возникает потребность привести переменные к CamelCase или другому стилю. Например, изменить наименование переменной с mylongvar на myLongVar или же применить snake case: my_long_var. Одним словом, задачи по конвертации регистра разные, и упростить их помогут плагины типа Change Case. Расширение поддерживает несколько вариантов для конвертирования: верхний регистр, нижний регистр, snake case, CamelCase, pascal (венгерская нотация) и другие.

VS Code: Change Case

Atom: Change Case

Повышаем узнаваемость файлов

При работе над проектами с большим количеством разношерстных файлов (HTML, CSS, SQL, PHP, JS и так далее) удобно определять тип файла не по расширению, а по знакомой глазу иконке. Подобный подход применяется во многих IDE, а вот текстовые редакторы по умолчанию с этим не парятся. Прокачать редактор и облегчить зрительное восприятие поможет расширение с набором иконок — VS Code Great Icons и Seti Icons. Расширение добавляет каждому файлу соответствующую иконку, после чего ориентироваться становится проще.

VS Code: VS Code Great Icons

Atom: Seti Icons

Иконки для файлов

Вредное выравнивание

Некоторые разработчики питают особые чувства к выравниванию текста. Речь идет про выравнивание значений относительно оператора =. Если ты не понял, о чем я говорю, то посмотри на эти несколько строчек кода:

var firstVarriable = 1;
var two            = 2;
var another        = 3;

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

VS Code: Align

Atom: Atom Alignment

Шаблон для JSDoc

JSDoc — стандарт оформления комментариев в JavaScript. Несмотря на общую лаконичность формата, набивать руками заготовку долго. Плагины Document this и Atom easy ускорят дело, добавив возможность быстрого формирования заготовок будущих комментариев.

VS Code: Document this

Atom: Atom easy

Парсер TODO

Не вспомню, откуда повелось, но еще со времен программирования на Delphi было принято помечать комментарием TODO те участки кода, которые планировалось отрефакторить в будущем. Все взрослые IDE предоставляют подобную функцию из коробки: кликаем и получаем список «задач из кода». Добиться примерно такого же эффекта в редакторах позволяют расширения VSCode Todo Parse Exentension и Todo Show Package для Atom. Расширения позволяют просканировать файл/проект и вывести в отдельную панель все TODO, FIXME, NOTE и другие комментарии.

VS Code: VSCode Todo Parse Exentension

Atom: Todo Show Package

Детектим цвета

Во время верстки очередной страницы указывать цвета принято в HEX/RGB/HWB/HSL. Проблема одна: если в голове отсутствует база используемых в оформлении цветов, то для определения цвета по его текстовому представлению придется копипастить значения в графический редактор. Задача рутинная и легко решается благодаря плагину Color Picker.

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

VS Code: Color Picker

Atom: chrome-color-picker

colorpickereditor.png

Приручаем C

Комфортное программирование на языке C# давно не ограничивается одной лишь Visual Studio. Писать код на этом популярном языке вполне возможно на VS Code и Atom, предварительно установив соответствующее расширение. Скажу сразу и честно: VS Code вне конкуренции. Для него доступно как официальное расширение Microsoft, так и стороннее с несколькими оригинальными фишками.

Официальное расширение предоставляет: подсветку синтаксиса, фирменную технологию автодополнения (IntelliSense), быстрый переход к определению, поиск ссылок, генераторы классов и другие привычные по Visual Studio операции. Есть поддержка отладчика для проектов .NET Core, поддерживающего работу под macOS, Windows и различными Linux. Перечисленного инструментария вполне достаточно для комфортной работы и разработки проектов под популярный ASP.NET MVC.

Что касается Atom, то здесь все несколько грустней. Самое популярное расширение для C# — language-csharp по факту добавляет только подсветку синтаксиса и различные сниппеты.

VS Code: C# for Visual Studio Code, C# Extensions

Atom: language-csharp

Поддержка EditorConfig

Что чаще всего подлежит настройке в любом редакторе? Все верно: размер отступов, кодировка по умолчанию, символ отбивки (табы vs пробелы), удаление завершающих пробелов. Эти параметры настолько часто меняются, что был придуман универсальный формат EditorConfig. Суть идеи проста: помещаем в корень конфигурационный файл, прописываем настройки, и любой современный редактор тут же их подхватит. Чтобы VS Code и Atom научились его понимать, придется поставить дополнительные расширения.

VS Code: EditorConfig

Atom: EditorConfig

Шаблонизаторы

При разработке на JavaScript активно приходится прибегать к помощи шаблонизаторов, которых существует бесчисленное множество. Однако наибольшую популярность завоевали handlebars и Jade. Первая проблема, с которой сталкиваешься, — подсветка синтаксиса. В случае с handlebars она решается установкой плагинов handlebars/atom-handlebars. Также не помешают решения вроде handlebars preview, умеющие на лету показывать результат компиляции шаблона.

С Jade чуточку сложней — синтаксис особо подсвечивать смысла нет, но есть плагины, упрощающие конвертацию HTML в синтаксис Jade и обратно. При верстке больших шаблонов такой конвертер (например, html2jade) сэкономит кучу времени и сил.

VS Code:

Atom:

Синхронизируем настройки

Выше я говорил, что муторнее всего при переезде на очередной редактор учить новые сочетания клавиш и отвыкать от тех, что давно укоренились в мозгу. Вторая по значимости проблема — синхронизация настроек. Если у тебя несколько рабочих компьютеров, ты меня поймешь. Мне приходится работать за двумя машинами — на работе Windows, а дома Mac. Дико раздражает, когда на работе установишь какой-нибудь полезный плагин или подкрутишь несколько настроек, а придя домой, понимаешь, что эти же действия надо повторить. Было бы здорово иметь возможность синхронизации настроек и установленных расширений, как в браузерах. И такая возможность есть.

Расширение Settings Sync позволяет синхронизировать установленные расширения, настройки, темы, раскладки клавиш и многое другое. Причем для синхронизации не требуется сторонний облачный сервис — все работает через GitHub. После базовой настройки (описание доступно на странице проекта) требуется запомнить две комбинации клавиш: Shift + Alt + u (выгрузка настроек) и Shift + Alt + d (загрузка настроек).

VS Code: Settings Sync

Atom: Sync Settings for Atom

Выборочный запуск кода

Хочешь запустить код на исполнение прямо здесь и сейчас? Причем не весь проект, а, например, один модуль или вовсе проверить работу одной функции? Согласись, запускать весь проект ради такой мелочи — кощунство. Специально для таких случаев есть плагин Code Runner. Он умеет запускать код в текущем табе или выделенный код. Результат исполнения выводится в консоль вывода. Во время отладки функций вещь чрезвычайно полезная.

Code Runner поддерживает не только JavaScript, но и другие популярные языки программирования: Java, PHP, Ruby… Требуется лишь установить в системе необходимые компиляторы/интерпретаторы и прописать в конфиг Code Runner пути к ним.

VS Code: Code Runner

Atom: Atom Runner

Сортировка строк

Некоторые разработчики обожают описывать свойства объектов или CSS-правила в алфавитном порядке. Плюсы и минусы такого подхода обсуждать не будем, но согласимся, что проблема сортировки возникает в самых разных ситуациях. Расширение Sort lines умеет сортировать выделенные в редакторе строки несколькими способами: по алфавиту, по длине, в случайном порядке и так далее. Я как-то видел, что подобные задачи, связанные с сортировкой списков значений, многие решают с помощью Excel. Если ты делаешь так же, то присмотрись к плагину, будет проще.

VS Code: Sort lines

Atom: Sort lines

Интегрируемся с Git

Без Git в наше время никуда. За годы практики я выработал для себя правило: работаешь с Git либо через консоль, либо через встроенный инструментарий в редакторе кода. Заставить себя пользоваться отдельными приложениями так и не получилось. Неудобно мне постоянно менять фокус, инструмент нужен здесь и сейчас. VS Code, а с недавних пор и Atom умеют работать с Git на базовом уровне. Серьезно расширить базовые возможности готовы специальные расширения вроде Git Easy, Git Lens и Git History.

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

Плагин Git Easy помогает упростить доступ к часто используемым командам Git (init, add, add file, push и прочие). Пригодится тем, кто не любит постоянно вбивать в консоли однотипные команды.

Git Lens — одно из самых мощных расширений для работы с Git из редактора. Добавляет возможности визуального сравнения изменений между версиями файлов, подсвечивает измененные строки, выводит информацию об измененных строках в виде аннотаций (имя автора и время добавления строки отображается на фоне кода), показывает превью перед слиянием и много другой полезной информации. Аннотации — одна из ключевых функций, позволяющих сразу понять, кто автор данного кода и когда код был закоммичен. Полный список возможностей смотри на странице проекта.

VS Code:

Автозакрытие тегов

При написании HTML/XML-кода важно не забывать прописывать закрывающие теги. Понятное дело, что «забывчивость» быстро отображается в виде поехавшей разметки. Чтобы не пропустить закрывающие теги там, где они действительно нужны, есть удобный плагин Auto Close Tag. Расширение поддерживает HTML/XML, закрывает только парные теги, поддерживает закрытие тегов в стиле Sublime Text 3, автоматически перемещает курсор между открывающим и закрывающим тегом.

VS Code: Auto Close Tag

Atom: Close Tags

Плагинов много не бывает

В статье мы успели рассмотреть наиболее популярные плагины для веб-разработчика. Это лишь малая часть из того, что есть в официальных репозиториях. Дальше все зависит от конкретных задач. Напоследок хочу дать один совет: не переборщи. Помни — чем больше установлено плагинов, тем скорей ты поймаешь тормоза (да-да, слова «скорей» и «тормоза» странно смотрятся в одной фразе :)). Не стоит при помощи плагинов делать из редактора IDE. Они создавались как легковесные решения и такими должны оставаться. Если требуется более серьезная и сложная функциональность — присмотрись к IDE. Выигрыш в производительности будет колоссальный.

Плюсы и минусы редакторов на веб-технологиях

Плюсы:

  • бесплатны;
  • сделаны веб-разработчиками для веб-разработчиков;
  • бескрайние репозитории плагинов;
  • хорошая конфигурируемость.

Минусы:

  • низкая производительность при работе с большими файлами;
  • нехватка дополнительных специализированных инструментов;
  • интерфейс менее отзывчив;
  • ошибки в плагинах.

Одной строкой

Статья подготовлена и опубликована в журнале "Хакер". Июль 2017.

Оставьте комментарий!
comments powered by HyperComments