От фрагментов кода, версий git до форматирования, рефакторинга до REST API, базы данных — все это в одном расширении.

Visual Studio Code — отличный редактор кода, который поставляется с функциями JavaScript и TypeScript, такими как базовый рефакторинг. Однако его истинная сила — выдающийся маркетплейс расширений.

Существуют расширения почти для всего, что вы можете сделать в IDE (интегрированной среде разработки), и они могут сделать VS Code во много раз лучше.

К сожалению, поиск нужных расширений и настройка VS Code может занять много времени. Многие разработчики предпочитают готовые решения, которые предоставляют такие IDE, как Webstorm.

В этом сообщении блога показано, как расширения кода Visual Studio могут помочь вам улучшить работу IDE для JavaScript. Это охватывает:

  • Завершение кода и фрагменты кода
  • Линтинг, проверка орфографии и подсказки
  • Форматирование, кодовые действия и рефакторинг
  • Поддержка редактором дополнительных типов файлов
  • Организация комментариев, TODO и закладок
  • Тестирование
  • Отладка
  • Контроль версий
  • База данных, REST API и клиенты Docker

Вы можете легко установить 25 расширений, которые преобразуют код Visual Studio в полноценную среду разработки JavaScript с помощью Пакета расширений среды разработки JavaScript.

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

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

Завершение кода и фрагменты кода

Функции завершения кода (IntelliSense) могут ускорить и упростить написание кода. Visual Studio Code по умолчанию предоставляет IntelliSense для JavaScript и TypeScript и содержит мощную поддержку Emmet для расширения фрагментов.

Одна из последних тенденций в автодополнении кода — помощники ИИ. Однако мой опыт работы с помощниками по завершению кода на основе ИИ, такими как GitHub Copilot и Tabnine, до сих пор был неоднозначным, и поэтому я не включил их в пакет расширений, но они могут отлично подойти вам.

Вот несколько расширений сниппетов, которые могут повысить вашу продуктивность.

1. Фрагменты ES7

Расширение сниппетов ES7 предоставляет множество расширяемых повседневных сниппетов. Например, определение импорта и экспорта, создание методов и циклов и возврат промисов.

Расширение также содержит множество фрагментов для React, Redux и GraphQL.

2. Эммет в прямом эфире

С расширением Emmet Live вы можете предварительно просмотреть вывод Emmet во время создания аббревиатуры Emmet. Вы можете запустить его с помощью команды Emmet Live.

3. Vscode-случайный

При написании тестов или создании мокапов часто требуется время, чтобы получить хорошие поддельные данные. Вы можете использовать расширение vscode-random для генерации многих видов случайных данных, таких как числа, местоположения, электронные письма, IP-адреса, имена и datetime значения.

Линтинг, проверка орфографии и подсказки

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

4. Проверка правописания кода

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

Расширение Code Spell Checker выделяет эти ошибки и часто может предоставить правильное написание в качестве исправления.

5. ЭСЛинт

ESLint — наиболее часто используемый линтер JavaScript. Это помогает вам находить и исправлять проблемы в вашем коде JavaScript.

ESLint очень расширяемый и настраиваемый, и многие команды имеют свои собственные правила для своих проектов.

Расширение ESLint показывает ошибки и предупреждения прямо в вашем редакторе и позволяет легко их быстро исправить. Вы также можете настроить его для автоматического исправления любых проблем при сохранении.

6. Объектив ошибки

Расширение Error Lens выделяет и отображает ошибки, предупреждения и информационные сообщения прямо в редакторе.

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

Форматирование, кодовые действия и рефакторинг

Visual Studio Code поставляется с базовыми рефакторингами и быстрыми исправлениями, такими как Rename, Extract Method и Extract Variable. Опыт редактирования может быть улучшен с помощью расширений:

7. Красивее

Форматирование кода вручную требует очень много времени и чревато ошибками. С Prettier, де-факто стандартным средством форматирования кода в мире JavaScript, вы можете автоматически форматировать свой код.

Вы даже можете настроить Prettier VS Code extension для форматирования исходного кода при его сохранении.

8. Изменить регистр

Расширение Изменить регистр добавляет широкий набор команд для изменения регистра выделенного текста, например, на верблюжий, змеиный, паскалевский и т. д. Все команды имеют префикс Change Case.

9. P42 JavaScript-помощник

Это JavaScript Assistant, который я разработал. Он добавляет 60+ рефакторингов, быстрых исправлений и кодовых действий в VS Code.

Он содержит рефакторинг React, модернизацию ECMAScript, преобразования синтаксиса и языковых элементов, действия для логических выражений и потока управления, а также очистку кода.

Поддержка редактором дополнительных типов файлов

Когда вы работаете с JavaScript и TypeScript, есть много других важных типов файлов. Visual Studio Code уже поддерживает редактирование JSON, HTML, CSS и Markdown. Следующие расширения добавляют расширенную поддержку редактора:

10. нпм

Расширение npm проверяет установленные модули Node.js, определенные в package.json файлах.

11. Предварительный просмотр SVG

Расширение предварительного просмотра SVG делает именно это: показывает предварительный просмотр для .svg файлов.

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

12. Еще лучше TOML

TOML — это формат файла конфигурации, который должен быть простым и легко читаемым. Расширение Even Better TOML добавляет полную поддержку редактора, включая подсветку синтаксиса, свертывание, навигацию и форматирование.

Организация комментариев, TODO и закладок

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

13. Лучшие комментарии

Расширение Лучшие комментарии показывает разные типы комментариев разными цветами. Он поддерживает такие префиксы, как !, ? и TODO.

14. Дерево задач

О TODO и FIXME легко забыть и потерять.
Расширение Todo Tree сканирует файлы в вашем рабочем пространстве на наличие аннотаций TODO и FIXME и упорядочивает их в виде боковой панели.

Вы можете легко просматривать их по папкам и повторно просматривать важные элементы, которые привлекают ваше внимание.

15. Закладки

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

Тестирование

Написание и запуск тестов – важнейшая часть процесса разработки.
В частности, модульные тесты, запускаемые в среде IDE, помогают получить немедленную обратную связь. Следующие расширения добавляют поддержку запуска тестов в VS Code:

16 и 17. Обозреватель тестов

Test Explorer — это набор расширений, которые органично интегрируют тестирование в VS Code. Его Расширение пользовательского интерфейса Test Explorer добавляет боковую панель для запуска тестов и просмотра результатов, а Строка состояния Test Explorer добавляет количество тестов в строку состояния.

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

В Visual Studio Code добавлены собственные возможности тестирования в версии 1.59.

Вы можете включить их в обозревателе тестов, установив testExplorer.useNativeTesting на true в Настройках VS Code.

Отладка

Visual Studio Code поставляется с отличным отладчиком JavaScript из коробки. Он может подключаться к Node.js, Edge и Chrome, поэтому в большинстве случаев нет необходимости в дополнительных расширениях, когда дело доходит до отладки JavaScript.

Контроль версий

Git — наиболее используемая система контроля версий (VCS), и для VS Code существуют отличные расширения. Вы также можете найти расширения для других систем контроля версий, таких как Subversion, на торговой площадке VS Code.

20. ГитЛенс

Расширение GitLens добавляет несколько панелей на боковую панель управления исходным кодом и расширяет редактор информационными наложениями.

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

GitLens — это важное расширение, которое значительно упрощает работу с Git в VS Code.

21. Git-график

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

База данных, REST API и клиенты Docker

Разработка полного стека JavaScript часто означает работу с внешними системами, такими как базы данных, REST API и Docker. Следующие расширения добавляют клиентов в VS Code:

22. Клиент базы данных

Расширение клиента базы данных позволяет подключаться к MySQL/MariaDB, PostgreSQL, SQLite, Redis и ElasticSearch.

Вы можете просматривать базы данных на боковой панели, открывать таблицы базы данных в виде панелей редактора и выполнять пользовательские запросы SQL. Содержимое таблицы базы данных доступно для редактирования. Любые изменения, которые вы делаете, немедленно сохраняются в базе данных.

23. Громовой клиент

Расширение Thunder Client интегрирует клиент для REST API в VS Code. Это облегченная альтернатива Почтальону. Вы можете отправить запрос http(s) любого типа, просмотреть данные ответа и организовать свои запросы в коллекции.

24. Докер

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

Бонус

Вот небольшое бонусное расширение, которое я считаю очень полезным:

25. КодСнап

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

Заключение

Я надеюсь, что этот пост дал вам несколько идей для расширений, которые могут улучшить ваш опыт работы с VS Code. С JavaScript IDE Extension Pack вы можете установить их все, а затем отключить или удалить те, которые не соответствуют вашим потребностям.