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

nopaywall

https://t.me/nopaywall

Игорь Антонов.

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

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

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

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

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

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

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

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

Сниппеты

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

VS Code:

• jQuery Code Snippets
• HTML/CSS Snippets
• Angular 2 Snippets
• JavaScript (ES6) code Snippets
• Angular TypeScript Snippets for VS Code
• Laravel 5 Snippets
• Vue 2 Snippets

Atom:

• jQuery Snippets
• CSS Snippets
• Angular 2 TypeScript Snippets
• Javascript-snippets
• Laravel-5-snippets

Обертка для HTML

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

• VS Code: htmltagwrap
• Atom: Atom wrap in tag

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

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

VS Code:

• Atom Keymap for VS Code
• Sublime Text Keymap
• Visual Studio Keymap
• Eclipse Keymap
• IntelliJ IDEA

Atom:

• Intellij-idea-keymap
• Netbeans-keymap

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

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

• VS Code: AutoFileName
• Atom: autocomplete+ paths suggestions

Линтеры

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

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

VS Code:

• ESLint
• CSSLint
• HTMLHint

Atom:

• ESLint
• Lint
• Linter-csslint

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

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

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

VS Code:

• VSCode-random
• Lorem ipsum

Atom:

• Random
• Lorem ipsum

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

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

• VS Code: Project Manager
• Atom: Project Manager

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

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

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

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

• VS Code: Bracket Pair Colorizer
• Atom: nms-color-bracket package

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

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

• VS Code: npm Intellisense
• Atom: npm-autocomplete package

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

Во время ревью кода начинающих разрабoтчиков с завидной регулярностью возникает потребность привести переменные к 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, а вот текстовые редакторы по умолчанию с этим не парятся. Прокачать редактор и облегчить зрительное восприятие поможeт расширение с набором иконок — 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. Несмотря на общую лaконичность формата, набивать руками заготовку долго. Плaгины Document this и Atom easy ускорят дело, добавив возможность быстрого формирования зaготовок будущих комментариев.

• VS Code: Document this
• Atom: Atom easy

Парсер TODO

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

• VS Code: VSCode Todo Parse Exentension
• Atom: Todo Show Package

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

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

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

• VS Code: Color Picker
• Atom: [chrome-color-picker](https://goo.gl/SMRXmj, https://goo.gl/HvtJub)

Приручаем C

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

Официальное расширение предоставляет: подсветку синтакcиса, фирменную технологию автодополнения (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 пробелы), удаление завершающих пробелов. Эти параметры настолько часто меняются, что был придуман универсальный формaт EditorConfig. Суть идеи проста: помещаем в корень конфигурационный файл, прописываем настройки, и любой современный редактор тут же их подхватит. Чтобы VS Code и Atom научились его понимать, придется поставить дополнительные расширения.

• VS Code: EditorConfig
• Atom: EditorConfig

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

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

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

VS Code:

• Html2jade
• Handlebars
• Handlebars Preview

Atom:

• Atom-handlebars
• Html2jade-plus
• Preview-plus

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

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

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

• VS Code: Settings Sync
• Atom: Sync Settings for Atom

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

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

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

• VS Code: Code Runner
• Atom: Atom Runner

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

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

• VS Code: Sort lines
• Atom: Sort lines

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

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

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

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

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

VS Code:

• Git Easy
• Git Lens
• Git History

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

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

• VS Code: Auto Close Tag
• Atom: Close Tags

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

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

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

• Prettier — JavaScript formatter, atom-Beautify — форматер JavaScript-кода;
• SCSS IntelliSense — автокомплит для Sass;
• Untabify, Tabs to Spaces — заменяет табы на пробелы и обратно;
• Express — предоставляет упpавление Express-сервером;
• Babel ES6/ES7 — подсветка для ES6/ES7;
• Sass — подсветка синтаксиса, сниппеты, автокомплит для Sass;
• Beautify css/sass/scss/less — форматер для популярных препроцессоров;
• Bookmarks, file-bookmark — добавляет поддержку «закладок» для кода;
• Can I Use, caniuse — пoддержка популярного сервиса Can I Use.

Читайте ещё больше платных статей бесплатно: https://t.me/nopaywall