Расширения VSCode, о которых вы должны знать

Visual Studio Code, поддерживаемый средствами Microsoft, является одним из самых известных редакторов с открытым исходным кодом. VSCode стремится предоставить все необходимое оборудование, при этом сокращая сложные рабочие процессы полных IDE. Многие программисты выбирают VS Code, поскольку он предоставляет множество расширений для введенной функциональности, производительности, отладки и скорости. В этом кратком руководстве мы расскажем о 10 расширениях VS Code, которые любой интернет-разработчик должен использовать в 2021 году. Мы поговорим о том, что они делают и как они могут облегчить ваш образ жизни при программировании. Взлетим!

Вот расширения VSCode, которые мы рассмотрим:

  1. Синхронизация настроек
  2. Живой сервер
  3. Удаленный - SSH
  4. Красивее
  5. Раскраска парных скобок
  6. Автоматическое переименование тега
  7. GitLens
  8. История Git
  9. Обзор CSS
  10. Фрагменты кода JavaScript
  11. Павлин
  12. Раскрашивать
  13. Проверка орфографии кода
  14. Иконочные шрифты
  15. vscode-icons
  16. Закладки

Синхронизация настроек:

Он позволяет синхронизировать практически все, что вы настраиваете в VSCode, с Github, от настроек до сочетаний клавиш и различных расширений VSCode. Таким образом, вы получите доступ к выбранной вами среде IDE из любого инструмента, который вам нужен, вместо того, чтобы переходить к программному обеспечению из стандартного окружения VSCode на новых устройствах или необходимости заново вручную устанавливать все заново.

Живой сервер:

Это определенно считается одним из моих любимых расширений. Live Server запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц. Каждый раз, когда вы сохраняете свой код, вы сразу видите изменения, предусмотренные внутри браузера. Вы будете намного быстрее распознавать ошибки, и гораздо проще провести небольшой короткий эксперимент вместе с вашим кодом.

Удаленный - SSH

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

Красивее

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

Брекет-пара Colorizer

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

Автоматическое переименование тега

В то время как VSCode по своей сути выделяет совпадающие теги и немедленно предоставляет закрывающие теги каждый раз, когда вы вводите открывающий тег, Auto Rename Tag обычно переименовывает теги, которые вы изменяете. Расширение работает с HTML, XML, PHP и JavaScript и устраняет необходимость дважды изменять имена тегов.

GitLens

GitLens усиливает навыки работы с Git в Visual Studio Code. Это эффективное расширение, которое позволяет вам узнать, кто, почему и как строки кода менялись с течением времени (среди множества уникальных функций). GitLens - это расширение, которое можно заметно настраивать. Если вам не нравится какой-то конкретный параметр, вы можете легко отключить его в настройках.

История Git

Подобно GitLens, Git History - это расширение VSCode, которое предлагает визуализацию журнала git. Это позволяет вам проверять ветки, коммиты и файлы во время коммитов. Вы также можете найти аватарки на Github, они довольно симпатичные.

CSS Peek

Это расширение ценно для фронтенд-разработчиков. Вдохновленный аналогичной функцией в скобках IDE, CSS Peek позволяет вам увеличивать ваш HTML-документ, чтобы в исходном коде отображался код CSS / SCSS / LESS. Кроме того, он позволяет быстро перейти к правильному коду CSS, если вы знаете имя класса или идентификатора.

Фрагменты кода JavaScript

В то время как VSCode включает интегрированный JS IntelliSense, фрагменты кода JS расширяют этот опыт, включая множество триггеров импорта / экспорта, помощников классов и триггеров методов. Расширение поддерживает JS, TypeScript, JS React, TS React, HTML и Vue. На VSCode Marketplace также просто доступны фрагменты кода для различных разновидностей, включая Angular.

Павлин

Peacock позволяет вам изменить цвет среды Visual Studio Code, чтобы вы могли быстро определить, на какой экземпляр вы переключились.

Раскрасить

Придерживаясь цветов, Colorize мгновенно визуализирует цвета CSS в ваших файлах CSS / SASS / Less /. Это позволяет с первого взгляда определить, какие цвета и где вы используете.

Проверка орфографии кода

Это расширение проверяет вашу орфографическую ошибку. Расширение доступно на многих разных языках.

Icon Fonts предлагает фрагменты для множества значков шрифтов, включая популярный пакет значков Font Awesome v5.

vscode-иконки

VSCode-icons добавляют в вашу IDE всплеск цвета и маленькие значки. Это делает вашу работу довольно интересной и поможет повысить вашу продуктивность.

Закладки

Хотя в VSCode есть номера строк, он позволяет добавлять закладки для кода, помогая быстро перемещаться и легко переходить снова и снова. Он позволяет вам выбирать области кода среди кода, отмеченного закладками, что очень полезно для чего-то вроде анализа файла журнала.