На Ютубе уже есть неимоверное количество видеороликов про "самые лучшие расширения для редактора кода VS Code", поэтому я решил, что этому миру нужен ещё один топ - на этот раз от меня. Шучу: вам совершенно не нужно смотреть все эти видеоролики, потому что они на 90% будут состоять из самых популярных расширений, которыми пользуются все. Этот набор одинаковый, однако не все программисты пристально следят за развитием VS Code, поэтому в их наборе иногда попадаются старые расширения, которые уже либо давно не нужны (функциональность введена в редактор), либо вообще вредны из-за глюков и тормозов (да, попадаются и такие расширения). Недавно я провёл ревизию среди своих расширений, удалил десяток неиспользуемых тем и расширений, и не могу сказать, что достиг совершенства, но мне точно удобно в таком редакторе работать.
 |
| Работа с учебным react приложением в VS Code и Firefox Nightly |
Итак, мой список расширений для VS Code, которые облегчают повседневное программирование, экономят время и нервы (жирным выделены must have расширения для меня).
- Prettier Plus. Prettier это гениальный форматтер кода, который после нажатия на кнопку сохранения (ctrl+s) превращает ваш как попало написанный код в прекрасно форматированный по всем правилам, которые вы можете ему определить (какие кавычки использовать, какие отступы). Просто не представляю как можно в 2020 году писать код без этого расширения! В маркетплейсе есть оригинальный Prettier с 6,5 миллионами скачиваний, но мне больше понравился форк Prettier+, потому что он лучше настроен на работу вместе с современным javascript и фреймворками.
- All Autocomplete. Умное расширение, которое сканирует открытые в проекте файлы и добавляет их в автодополнение (например названия классов из вашего css или функции из модуля js).
- Auto Rename Tag. Маленькое, но очень полезное расширение, которое автоматически изменяет закрывающий тег, если вы редактируете открывающий. И почему такой функциональности нет из коробки? Работает вообще с любыми тегами.
- Bracket Pair Colorizer 2. Расширение, которое раскрашивает открывающую и закрывающую скобку одним цветом, а так же остальные скобки разными цветами. Выглядит просто, но на самом деле это крайне важная штука. Без неё я бы давно сошёл с ума, пытаясь разобраться в хитросплетениях скобок javascript. В дополнение к нему есть расширение Indent Rainbow, которое раскрашивает отступы в коде по глубине, но мне оно не понравилось, потому что код превращается в цветные горы. *устарело
- Code Runner. Добавляет в VS Code кнопку "Запустить", которую я безуспешно искал, когда только начинал учиться программировать. Просто подразумевается, что редактор кода это вам не IDE и он не будет вам ничего запускать или компилировать - всё это обычно вы делаете сами из терминала (именно так все и делают обычно). Code Runner понимает множество языков программирования: например он знает как запустить скрипт python или файл typescript через node.js. Кроме того он умеет запускать выделенный фрагмент кода, а не весь файл целиком, что бывает очень полезно при обучении и отладке.
- Settings Sync. С помощью этого расширения вы можете сохранить и синхронизировать все настройки редактора в ваш gist на github (это такая записная книжка для программиста). В экспериментальных сборках VS Code уже тестируется встроенная аналогичная функция. *устарело функция теперь встроена в редактор.
- EditorConfig for VS Code. EditorConfig это такой полезный файл, в котором вы можете хранить настройки редактора кода для каждого отдельного проекта. Этот файл можно передать, хранить в репозитории или просто скопировать себе в новый проект ваши любимые настройки.
- ES7 React/Redux/GraphQL/React-Native snippets. Если вы программируете на React, то вам будет крайне полезен этот набор сниппетов (заготовок кода, шаблонов). Например, вы можете написать "rfc", а редактор кода по нажатию tab развернёт заготовку для функционального компонента. VS Code, конечно же, имеет встроенную систему хранения пользовательских сниппетов, но тут уже всю работу сделали за вас.
- Guides. Улучшенная отрисовка линий отступов. Особенно полезно при работе в Python, ведь там отступы имеют важное значение.
- Highlight Matching Tag. Полезное при работе с тегами расширение (помогает не только при работе с html, но и в React). В редакторе Sublime эта функция есть "из коробки" (подчеркивает открывающий и закрывающий тег), а в VS Code это тоже есть (нужно нажать ctrl+d, чтобы выделились парные теги), но мне не нравится как это сделано - подчеркивание цветной линией выглядит красивее.
- Live Server. Любимое расширение и основной инструмент всех верстальщиков. Запускает локальный сервер с "горячей перезагрузкой" при изменении файлов проекта. Раньше для таких возможностей надо было поднимать gulp (или использовать стороннюю программу), настраивать функциональность, а тут всё это работает просто при нажатии "Go Live" внизу страницы.
- NPM intellisense. Если у вас в проекте есть папка node_modules, то это расширение вам поможет.
- Output Colorizer. Расширение от IBM, которое раскрашивает ваш лог. К сожалению, конфликтует с Code Runner, который тоже "раскрашивает" текст в окне вывода (это ограничение редактора - только одно расширение может изменять там форматирование).
- Rainbow CSV. Если вы любите рассматривать CSV файлы, то это расширение скрасит вам времяпрепровождение. Лично я перешёл на json для хранения и передачи данных.
- Svelte intellisense. Это расширение для тех, кто программирует на javascript фреймворке Svelte.
- Vetur. Расширение, если вы программируете на фреймворке Vue. *проблемное С выходом третьей версии Vue, Vetur начал работать крайне нестабильно и многие vue-шники стали использовать расширение Volar.
- CSS Navigation. Вы можете выделить класс в вашем html и нажать F12, и тогда вы попадёте в определение класса в вашем css. Позволяет быстро перемещаться по коду без поиска.
- ESLint. Большое и глобальное расширение, которое поможет вам писать код правильно. Нет, оно не отформатирует его за вас (хотя может работать в связке с Prettier), но укажет вам на места ошибок. Имеет гибкие настройки правил, но особой популярностью у разработчиков javascript пользуется стайлгайд от ребят из Airbnb.
- Image Preview. Очень полезное расширение, которое помогает при вёрстке. Если вы правильного написали путь до картинки, то оно вам покажет превью на полях. Таким образом вы всегда может легко увидеть участки кода, где применяются изображения.
- Babel Javascript. Специальная подсветка для javascript, где учтены все особенности современного диалекта и использования JSX. Если пишите на React, то это расширение будет полезным.
- NPM. Позволяет запускать скрипты npm из встроенной консоли редактора (не терминала, а та, что вызывается по нажатию ctrl+shift+p).
- REST Client. Очень простое и эффективное расширение, которое заменяет популярный Postman для работы с запросами к API. Храните ваши запросы или логи в простых текстовых файлах, которые могут находиться вместе с кодом приложения. Требует минимального изучения документации, чтобы писать запросы, но всё окупается простотой использования расширения.
- Visual Studio IntelliCode. Умное автодополнение от Microsoft. Да, может и не самое умное в мире, если сравнивать с полноценными IDE типа Jetbrains. Есть различные автодополнения для VS Code, но не все они полезны. Например есть крутейшая вещь типа TabNine с машинным обучением на основе текстов программ с github, благодаря чему оно может угадывать просто куски кода и названия переменных (всё уже написано до вас тысячи раз), но, к сожалению, это расширение периодически тормозит и глючит.
 |
| Так выглядит редактор кода у меня |
Украшательства. Это очень важная сторона настройки свой среды для редактирования, но тут очень трудно советовать что-то для всех, потому что у всех вкус разный (о, каких только диких расцветок я не повидал у программистов на Ютубе). Просто опишу несколько популярных и моих текущий расширений:
- Моя текущая тема это - Plastic. Ещё могу посоветовать The Best Theme и One Monokai Theme.
- В сообществе крайне популярна Material Theme. Вам обязательно стоит попробовать её - это классика. Кстати, не удивляйтесь, если некоторые темы попросят вас купить их - всё таки это считается профессиональным продуктом, но никто не заставляет вас это делать и вы всегда можете найти аналогичный бесплатный форк. Вторая по популярности тема это - One Dark Pro, пришедшая к нам из редактора Atom (тема так же имеет множество форков и вариаций).
- Заслуживает внимание тема Dracula от дизайнера, который поставил своей целью донести это графическое оформление до мира. Несмотря на название, это довольно мягкая по цветам тема и ничего красного там нет.
- Если вам понравилась какая-то популярная тема, то определённо стоит поискать менее популярные форки этой темы. Таким образом, например, я нашёл отличную тему Snazzy Plus, которая является доработанной и улучшенной темой Snazzy Operator.
- Текущая тема иконок файлов у меня - Material Icon Theme. Ещё популярны VS Code Great Icons.
- Есть особое направление в темах для тех, кому хочется минималистичных тем без обилия цветов. Имеется целый набор минималистичных тем: например Min Theme. Или вот светлая тема Alabaster от нашего соотечественника и создателя шрифта Fira Code.
- Некоторые известные программисты имеют собственные темы подсветки кода, которые вы можете часто увидеть в их редакторах. Wes Bos (автор популярных курсов по фронтенду) разработал фирменную тему Cobal2, а Дэн Абрамов (из команды React) Subliminal.
- Если вам нравятся необычные цвета, то имеется классная тема Pop N' Lock.
update по состоянию на 2021 год, версия VS Code 1.60:
Разработчики редактора часто смотрят на самые популярные версии расширений и не стесняются переписывать их, делая свои альтернативы, которые очевидно написаны лучше и работают намного быстрее, чем оригинальные расширения.
- Bracket pair colorization теперь встроен прямо в редактор кода и работает очень быстро. Раскрашивание скобок можно включить в настройках. Соответственно оригинальное расширение можно удалить и забыть.
- Аналогичным образом разработчики Microsoft написали собственную реализацию Live Server, которая работает как внутри редактора кода, так и с внешним браузером. Отличается от оригинального live server тем, что реально live - способен перерисовывать страницу прямо на лету, пока вы переписываете код (после каждого нажатия), а не после сохранения страницы.
- Так как GitHub это теперь тоже собственность Microsoft, то таким образом фирменную тему оформления можно считать официальной. Странно, что её не добавили в дистрибутив, учитывая что у неё 2 миллиона скачиваний.
