Visual Studio Code, поддерживаемый Microsoft, является одним из самых популярных редакторов с открытым исходным кодом. VSCode стремится предложить все необходимые инструменты, сокращая при этом сложные рабочие процессы полных IDE. Многие программисты предпочитают VS Code, потому что он предлагает множество расширений для дополнительной функциональности, производительности, отладки и скорости.
В этом кратком руководстве мы рассмотрим 10 основных расширений VS Code, которые любой веб-разработчик должен использовать в 2021 году. Мы обсудим, что они делают и как они могут облегчить вашу жизнь кодирования. Давайте прыгнем!
Bracket Pair Colorizer
Раскраска пара скобок расширения VS сопоставляет соответствующие скобки в вашем коде с тем же цветом. Это очень помогает, когда вы работаете с такими вещами, как вложенные компоненты, объекты или функции, у которых есть квадратные или круглые скобки.
С помощью этого простого расширения намного проще найти подходящие пары и понять ваш код. Самым большим преимуществом этого расширения является улучшенная навигация и доступность. Это также облегчает другим чтение и понимание вашего кода.
Better Comments
Better Comments — это расширение, используемое для написания удобных для человека комментариев в вашем коде, которое полезно для вас и всех, кто читает исходный код (особенно для команд). Описательные, понятные для человека комментарии экономят так много времени для всех участников.
С этим расширением VS вы можете использовать следующие символы после двойной косой черты, //чтобы упростить комментирование:
- * для выделенного текста
- ! на ошибки и предупреждения
- ? для запросов и вопросов
- // для зачеркивания
- TODO для задач
Better Comments
Сниппеты — отличное дополнение для повышения производительности. Snippets — это набор различных расширений для наиболее часто используемых языков программирования. Например, React Snippet — это популярное расширение, которое позволяет вам использовать и создавать сокращения для того, что вы делаете снова и снова.
Некоторые популярные варианты:
- Angular Snippets (версия 11)
- Python
- Фрагменты кода JavaScript (ES6)
- HTML-фрагменты
- Фрагменты Vue 3
CSS Peak
CSS Peak — отличное расширение для веб-разработчиков, поскольку оно позволяет «заглядывать» в стили для классов CSS, идентификаторов и даже тегов HTML. Это расширение похоже на функцию скобок, называемую встроенными редакторами CSS.
CSS Peak поддерживает отслеживание определения символов для любого селектора CSS, например:
- Peek: загрузка встроенного файла CSS для быстрого редактирования ( Ctrl+Shift+F12)
- Go To: перейти непосредственно к файлу CSS ( F12)
- Hover: показывать определение при наведении курсора на символ ( Ctrl+hover)
Prettier
Расширение Prettier — это средство форматирования, которое помогает поддерживать согласованный стиль кода. Вы можете настроить свои параметры так, как вам нужно, и сохранить их с помощью ярлыков. Prettier — один из самых популярных форматеров кода, набравший более 38,5 тысяч звезд на GitHub.
Prettier автоматически исправит проблемы с форматированием в вашем коде, например исправит сочетание одинарных и двойных кавычек или нерегулярное использование точек с запятой.
Это расширение работает со следующими технологиями: JavaScript, TypeScript, Java, JSON, CSS, HTML, Vue, Angular, Markdown, YAML и другими.
Relative Path
Относительный путь — отличное расширение для написания операторов импорта. Вы можете легко получить относительный путь к любому файлу, используя ярлыки в вашем рабочем пространстве. Вместо поиска местоположения файла вам нужно только имя файла, а расширение предоставит относительный путь от текущего местоположения к этому целевому файлу.
Примечание. Потребуется некоторая настройка, если вы работаете с большим монорепозиторием.
Icons
Значки позволяют создавать наглядные значки, помогающие различать файлы и папки. Это делает ваш код более наглядным, поэтому вам будет легче работать в команде, вернуться к коду через некоторое время или даже просто сделать работу более увлекательной. Например, вы можете изменить цвет значка папки по умолчанию с помощью палитры команд.
Есть несколько различных расширений иконок, в том числе
- vscode-иконки
- Тема значка материала
- Значки темы материалов
- Простые иконки
GitLens
Расширение GitLens объединяет возможности Git с VSCode, что позволяет визуализировать авторство кода через Git. GitLens отлично подходит для лучшего понимания кода, поэтому вы можете узнать, кто, почему и когда был изменен код. Это также позволяет вам изучить историю и эволюцию кодовой базы.
Он также имеет множество других функций, таких как:
- Навигация по редакциям по истории файлов
- Аннотации обвинения в текущей строке в конце строки, показывающей фиксацию
- Аннотации обвинения в строке состояния для фиксации и автора, который последним изменил текущую строку
Import Cost
Расширение стоимости импорта помогает повысить производительность, показывая примерный размер пакета импорта. Это помогает избежать проблем, отслеживая размер добавленных зависимостей.
Если размер импорта слишком велик, расширение «Стоимость импорта» предупредит вас, чтобы вы могли перенастроить его в соответствии с установленными вами требованиями.
Markdown All in One
Markdown All in One — очень полезное расширение для всего, что связано с уценкой. Он добавляет такие функции, как автоматический предварительный просмотр, ярлыки, автозаполнение синтаксиса и многое другое. Markdown обычно используется во многих областях техники, и это расширение упрощает работу, повышая производительность и скорость.
С Markdown All in One вы можете использовать ярлыки для изменения текста и добавления таких вещей, как полужирный, курсив и т. Д. Он также имеет полезную автоматизацию для работы с такими вещами, как списки и математика. Вот несколько общих команд:
- Создать оглавление
- Удалить номера разделов
- Переключить блок кода
- Распечатать текущий документ в HTML
