Расширения предоставляют дополнительные функции и инструменты, которые позволяют настраивать и улучшать процесс разработки, а также повышать производительность.
VS Code — одна из наиболее часто используемых IDE в сообществе разработчиков, и что делает ее более популярной, так это расширения на рынке. Расширения VS Code предоставляют дополнительные функции и инструменты, которые позволяют настраивать и улучшать работу, но установка правильного набора расширений вместе с их эффективным использованием может значительно повысить вашу общую производительность. Итак, давайте посмотрим на обязательные расширения, которые я лично использую с VS Code.
Автоматическое переименование тега
Устали вручную менять открывающие и закрывающие теги один за другим во время работы с HTML/JSX, Auto Rename Tag здесь для спасения. Просто установите его и позвольте ему обрабатывать переименование открывающего/закрывающего тега, пока вы изменяете любой из них, всякий раз, когда вы переименовываете открывающий или закрывающий тег, другой будет обновляться этим расширением.
Лучшие комментарии
Вам трудно читать и классифицировать комментарии к коду на TODO, запросы, предупреждения и т. д.? Это расширение позволяет вам эффективно идентифицировать комментарии на основе этих категорий и угадывать, что оно также позволяет вам определять свои собственные категории.
Лучшие комментарии — Visual Studio Marketplace
Расширение «Лучшие комментарии поможет вам создавать в коде более понятные комментарии. С этим расширением вы…marketplace.visualstudio.com»
Цветовое выделение
Простое, но мощное расширение для выделения значений цвета с помощью фактической цветной границы или фона в режиме реального времени для всех файлов, поэтому в следующий раз вам не нужно будет тратить время на определение цвета для конкретного значения.
Проверка правописания кода
Обеспечение отсутствия опечаток в коде — это своего рода кошмар для разработчиков, а также для рецензентов, поскольку мы склонны опускать незначительные орфографические ошибки здесь и там в коде, будь то в коде, содержании или комментариях, но это расширение подчеркивает эти опечатки в режиме реального времени, а также поддержка camelCase и snake_case. Кроме того, он поддерживает добавление списка настраиваемых слов, которые могут показаться вам ложными срабатываниями.
CodeSnap
Как насчет того, чтобы сделать красивый скриншот вашего кода прямо из самого VS Code? Все, что вам нужно сделать, это установить это расширение и нажать Ctrl + Shift + P , найти CodeSnap, выбрать код, который вы хотите сделать скриншотом, и ваш скриншот готов поделиться! Вы можете скопировать/скачать файл прямо оттуда.
Объектив ошибки
Одно из моих личных фаворитов в списке, я не мог объяснить, насколько это расширение помогает при отладке кода, выделяя ошибки и предупреждения (с цветовыми кодами) в самом редакторе без необходимости наводить курсор на красную строку.
ESLint
Одно из самых популярных расширений среди разработчиков JavaScript, ESLint помогает вам удалить незамеченные ошибки и предупреждения, которые могут появиться в противном случае после незначительной настройки.
Объектив Git
Git Lens дает быстрый взгляд на то, кто, почему и когда была изменена строка или блок кода. Он предоставляет аннотации к файлам (обвинения и изменения) и виды боковой панели, а также множество других полезных функций.
Средство просмотра запросов на вытягивание Github
Что, если я скажу вам, что вы можете отслеживать и просматривать PR на Github прямо из своего VS Code (благодаря бесшовной интеграции VS Code + Github), все, что вам нужно сделать, это установить это расширение и предоставить доступ к своей учетной записи Github, войдя в систему и вы хороши для мониторинга, просматривайте PR вместе с кучей вещей прямо из вашего кода VS.
Выделить соответствующий тег
Вы также запутались, находя дополнительный тег для открывающего/закрывающего тега в HTML/JSX, с этим расширением нет путаницы. Просто наведите курсор на тег, и это расширение выделит дополнительную открывающую/закрывающую часть тега.
Отступ Радуга
Это расширение упрощает чтение многошагового отступа, добавляя чередующиеся разные цвета на каждом шаге. Полезно, в частности, для языков, зависящих от отступов, таких как Python и Yaml, но работает и для независимых языков.
шутник бегун
Jest Runner помогает запускать определенные наборы тестов/кейсы прямо из файла в редакторе одним нажатием кнопки. Наряду с этим он также поддерживает отладку тестовых случаев прямо из редактора.
Живой сервер
Это первое расширение, которое я когда-либо использовал с VS Code, и мне очень понравилось его использовать из-за простоты, которое оно обеспечивает, в частности, для локальной разработки. Он позволяет запускать локальный сервер разработки с горячей перезагрузкой как для статических, так и для динамических страниц.
Предварительный просмотр SVG
Это расширение обеспечивает поддержку предварительного просмотра SVG в реальном времени, а также живое редактирование SVG, и все это из самого VS Code.
Завершающие пробелы
Расширение Trailing Spaces, как следует из названия, помогает вам идентифицировать конечные пробелы в коде, выделяя их, как показано на прикрепленном изображении, а также поддерживает удаление конечных пробелов за один раз.
Журнал турбо-консоли
Это обязательный элемент для разработчиков JavaScript и TypeScript, который значительно упрощает отладку, предоставляя поддержку добавления значимых сообщений журнала, просто выбирая переменную и нажимая сочетание клавиш (Ctrl + Alt + Л). Наряду с этим также предоставляется поддержка комментирования/раскомментирования всех сообщений журнала, добавленных расширением в текущем документе. Просто попрощайтесь с ручным добавлением сообщений журнала.
Переводчик ошибок TypeScript
Ошибки, генерируемые TypeScript, иногда могут быть довольно запутанными и разочаровывающими, но это расширение переводит ошибку в удобочитаемую форму прямо из самой IDE.
Спасибо за прочтение. Если вы нашли эту статью полезной, пожалуйста, рассмотрите возможность подписаться на меня на Medium! Также поделитесь своими любимыми расширениями VS Code в комментариях.
Want to connect? Reach out on Twitter, LinkedIn or in the comments below!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
