В первой части мы более-менее разобрались, чем VS Code отличается от VSCodium и почему выбор редактора не должен превращаться в отдельную духовную практику. Теперь логично поговорить про расширения.
Потому что VS Code без расширений это нормальный редактор. А VS Code с расширениями это уже почти рабочее место веб-кодера. Иногда удобное, иногда страшное, иногда похожее на кладовку, куда десять лет складывали «оно еще пригодится».
Самая большая ошибка начинающего пользователя VS Code: открыть Marketplace и начать ставить всё, где красивая иконка, много скачиваний и в описании написано «must have». Через час редактор уже умеет подсвечивать скобочки радугой, мяукать при ошибке, показывать котика при сохранении и потреблять память как маленький Chrome. Хотя это, в общем-то, он и есть.
Поэтому расширения лучше ставить не по принципу «пусть будет», а под конкретную задачу.
Prettier: чтобы код выглядел прилично без семейных скандалов
Prettier это форматировщик кода. Он берет ваш HTML, CSS, JavaScript, JSON и приводит к одному виду.
Главная польза Prettier не в том, что он делает код красивым. Красота в коде штука спорная. Главная польза в том, что он убирает бессмысленные разговоры про пробелы, переносы и кавычки.
Раньше можно было полчаса спорить:
«А почему тут одинарные кавычки?»
«А почему перенос строки здесь?»
«А почему отступ два пробела, а не четыре?»
С Prettier всё проще. Настроили один раз, нажали сохранить, редактор сам всё расставил. Не идеально, но одинаково. А одинаково в командной работе часто важнее, чем красиво.
Для веб-кодера это расширение почти обязательно. Особенно если проект больше одной страницы и в нем есть не только index.html, но еще немного JS, CSS и внезапная надежда на порядок.
ESLint: строгий товарищ, который не любит ваш JavaScript
ESLint нужен для проверки JavaScript и TypeScript. Он не форматирует код как Prettier, а ищет ошибки, странности и подозрительные места.
Например, забыли переменную, написали условие криво, оставили неиспользуемую функцию, где-то поставили лишний console.log. ESLint посмотрит на это и начнет тихо ругаться красным.
Сначала он бесит. Особенно когда вы просто хотели «быстренько проверить», а он уже сообщает, что вы плохой человек и забыли точку с запятой. Потом привыкаешь и понимаешь, что он реально экономит время.
Для простой верстки ESLint может быть избыточен. Но если на проекте есть нормальный JavaScript, сборка, React, Vue или хотя бы несколько файлов со скриптами, лучше поставить. Грабли в JS и так лежат достаточно плотно, не обязательно наступать на все лично.
Live Server: маленький локальный сервер для быстрой верстки
Live Server одно из самых приятных расширений для простой HTML/CSS верстки. Открыл папку, нажал запуск, получил страницу в браузере. Сохранил файл, браузер обновился.
Казалось бы, мелочь. Но когда верстаешь лендинг, письмо или простую страницу, эта мелочь сильно ускоряет жизнь. Не надо каждый раз тыкать обновление руками и смотреть, почему картинка не подгрузилась, потому что путь был написан от души, а не от корня проекта.
Для WordPress-тем Live Server уже не всегда подходит, там нужен локальный сервер с PHP и базой. Но для чистой верстки это прям хороший инструмент. Из серии «поставил и забыл, что когда-то было иначе».
Auto Rename Tag: чтобы закрывающий тег не жил своей жизнью
Auto Rename Tag делает простую вещь: переименовывает парный HTML-тег.
Было:
<div></div>
Начали менять первый div на section, второй тоже поменялся. Всё.
Звучит как ерунда, пока не сидишь вечером в чужой верстке, где div вложен в div, который лежит в div, а рядом еще один div, потому что семантика уехала в отпуск. В такой ситуации любое автоматическое переименование это уже не удобство, а легкая форма психотерапии.
Расширение маленькое, полезное, лишнего почти не делает. Можно ставить смело.
Auto Close Tag: для тех, кто любит открывать, но забывает закрывать
Auto Close Tag автоматически закрывает HTML-теги. В современных версиях VS Code часть этой логики уже есть, но расширение всё равно часто ставят по привычке.
Если редактор сам нормально закрывает теги, можно не ставить. Если по какой-то причине не закрывает или работает не так, как хочется, тогда пригодится.
Вообще с такими расширениями важно не переборщить. Иногда VS Code уже умеет то, ради чего человек ставит отдельный плагин. В итоге две автоматизации начинают помогать одновременно, и получается не помощь, а хор советчиков на кухне.
Path Intellisense: чтобы пути к файлам не писать на ощупь
Path Intellisense подсказывает пути к файлам.
Пишете путь к картинке, CSS-файлу, JS-файлу или чему-то еще, редактор предлагает варианты. Очень удобно, особенно когда структура проекта сделана не вами и напоминает археологический раскоп.
Для веб-кодера полезно почти всегда. Ошибки в путях это классика жанра: картинка не видна, шрифт не подключился, скрипт не работает, а виноват один лишний уровень папки. Или наоборот, одного уровня не хватило. Интернет от этого не ломается, но настроение портит.
CSS Peek: посмотреть CSS, не бегая по файлам
CSS Peek помогает быстро находить CSS-правила для классов и идентификаторов прямо из HTML.
Навели на класс, перешли к описанию, посмотрели, что там написано. Для больших проектов и чужих шаблонов это удобно. Особенно если CSS лежит не в одном файле style.css, а размазан по проекту тонким слоем боли.
Для простой верстки можно жить без него. Для WordPress-тем, старых сайтов и проектов, где стили писали несколько человек в разные годы, расширение очень не плохое.
IntelliSense for CSS class names: подсказки классов
IntelliSense for CSS class names in HTML подсказывает классы из CSS-файлов прямо при наборе HTML.
Это удобно, когда в проекте много классов и они не всегда очевидны. Например, вы точно помните, что был какой-то .content-wrapper, .main-content-wrap или .wrapper-content-main, но какой именно, никто уже не знает. Документации нет, зато есть надежда.
Расширение помогает не плодить новые классы из-за плохой памяти. А это важно. Потому что один лишний класс это мелочь, а через полгода из таких мелочей получается CSS, который никто не хочет трогать даже палкой.
Color Highlight: чтобы цвет был цветом, а не загадкой
Color Highlight подсвечивает цвета прямо в коде.
Видите #ffcc00 и сразу понимаете, что это не «какой-то желтый», а вполне конкретный желтый. Для CSS полезно, для переменных тоже. Особенно когда в проекте пять оттенков серого, отличающихся между собой так тонко, что дизайнер видит, а монитор нет.
Можно работать и без него, но с ним приятнее. Главное не начать выбирать цвета прямо в редакторе вместо того, чтобы открыть макет. Хотя кто из нас без греха.
GitLens: Git под микроскопом
GitLens расширяет работу с Git. Показывает, кто менял строку, когда менял, зачем, и иногда хочется еще добавить вопрос «почему?», но это уже не к расширению.
Для одиночной работы GitLens не обязателен, хотя тоже удобен. Для командной работы почти must have. Можно быстро понять, откуда взялся странный кусок кода, кто его правил и в каком коммите это случилось.
Но есть нюанс. GitLens мощный, местами слишком мощный. Если использовать всё подряд, интерфейс редактора превращается в панель управления самолетом. Поэтому лучше включать только то, что реально нужно.
Error Lens: ошибки прямо перед глазами
Error Lens выводит ошибки и предупреждения прямо в строках кода, а не только в панели Problems.
Очень удобно, потому что не надо смотреть вниз и гадать, где именно проблема. Ошибка лежит прямо там, где вы ее сделали. Честно, неприятно, зато полезно.
Минус один: если проект весь красный от предупреждений, работать становится психологически тяжело. Редактор выглядит так, будто он вами разочарован. Но это не проблема расширения, это проблема проекта. Или жизни.
PHP Intelephense: если в проекте есть PHP
Для WordPress, старых сайтов, самописных админок и прочего PHP-добра полезен PHP Intelephense.
Он дает нормальные подсказки, переходы к определениям, проверку кода и немного человеческого отношения к PHP в VS Code. Без него PHP-файлы тоже можно открывать, но удовольствие будет как от чтения договора мелким шрифтом.
Если вы работаете только с HTML/CSS/JS, можно не ставить. Если трогаете WordPress-темы или плагины, ставить стоит.
WordPress Snippets: осторожно, сниппеты
Для WordPress есть разные расширения со сниппетами. Они помогают быстро вставлять функции, хуки, куски шаблонов и прочие знакомые конструкции.
Это удобно, но есть опасность. Сниппеты не заменяют понимание. Можно быстро вставить add_action, но если не понимать, куда и зачем, получится не разработка, а магический обряд.
Для опытного человека сниппеты ускоряют рутину. Для новичка могут создать иллюзию, что WordPress это просто набор заклинаний. Хотя, если честно, иногда так и выглядит.
Tailwind CSS IntelliSense: если вы живете в Tailwind
Если проект на Tailwind, расширение Tailwind CSS IntelliSense обязательно. Оно подсказывает классы, показывает значения, помогает не держать в голове всю эту простыню из flex, items-center, justify-between, mt-4, text-slate-700 и прочего забора.
Если Tailwind не используете, ставить не нужно. Просто не нужно. Это важное правило для всех расширений: если инструмент не участвует в работе, ему не обязательно жить в редакторе.
Что в итоге ставить
Если собрать минимальный набор для обычного веб-кодера, я бы начал с такого списка:
- Prettier
- ESLint, если есть JavaScript
- Live Server, если верстаем статические страницы
- Auto Rename Tag
- Path Intellisense
- CSS Peek
- IntelliSense for CSS class names
- Color Highlight
- GitLens, если работаем с Git
- PHP Intelephense, если есть PHP или WordPress
И дальше уже по ситуации.
Не надо ставить расширение только потому, что оно популярное. Популярным бывает и желание всё переписать с нуля, но это не значит, что желание хорошее.
Небольшой вывод
Расширения в VS Code это главное преимущество редактора и главная ловушка одновременно.
Правильный набор расширений делает работу быстрее и спокойнее. Неправильный набор превращает редактор в ярмарку, где каждый плагин что-то советует, подсвечивает, проверяет, форматирует и требует внимания.
Для начала лучше поставить минимальный набор, поработать неделю и только потом добавлять то, чего реально не хватает. Не наоборот.
Редактор должен помогать писать код, а не становиться отдельным хобби. Хотя, конечно, вечер на подбор темы, иконок и шрифта мы все равно однажды потеряем. Это почти обязательный обряд посвящения в VS Code.