Добро пожаловать в серию Мои настройки VScode, как ранее мы видели 10 лучших тем для Visual Studio Code, теперь пришло время изучить 10 лучших полезных расширений, которые помогут вам лучше писать, отлаживать двускатный и структурированный код.
Начнем…
Git Lens — Git Supercharges (более 8 млн загрузок)
GitLens superchages — это встроенный инструмент vscode, который помогает вам с первого взгляда визуализировать частные и общедоступные репозитории git. GitLens интегрируется с функцией управления исходным кодом, с помощью которой доступ к функциям git осуществляется через сам код Vs.
GitLens просто помогает вам лучше понимать код. Быстро узнать, кто, почему и когда была изменена строка или блок кода. Вернитесь назад в историю, чтобы получить дополнительные сведения о том, как и почему код развивался. С легкостью исследуйте историю и эволюцию кодовой базы.
Ссылка для установки: GitLens — Git с наддувом — Visual Studio Marketplace
Intellisense для имен классов CSS (более 3 миллионов загрузок)
Расширение Visual Studio Code, обеспечивающее завершение имени класса CSS для атрибута класса HTML на основе определений, найденных в вашей рабочей области или во внешних файлах, на которые ссылается элемент ссылки.
Это расширение очень удобно, когда в вашей рабочей области много классов, и это расширение предоставляет вам IntelliSense и автозаполнение имени вашего класса.
Ссылка для установки: IntelliSense для имен классов CSS в HTML — Visual Studio Marketplace
Закладки (1,3 млн + загрузок)
Расширение закладок помогает вам перемещаться по коду, легко и быстро перемещаясь между важными позициями. Через закладки вы можете добавить несколько меток/контрольных точек, чтобы вам не приходилось постоянно перемещаться по громоздким файлам кода.
- Отметить/снять отметки в вашем коде
- Отметьте позиции в вашем коде и дайте ему имя
- Перейти вперед и назад между закладками
- Посмотреть список всех закладок в одном файле и проекте
Ссылка для установки: Закладки — Visual Studio Marketplace
Автоматический импорт (1,3 млн + загрузок)
Автоматически находит, анализирует и предоставляет кодовые действия и завершение кода для всех доступных импортов. Работает с Typescript и TSX.
Кроме того, если вы изменяете/перемещаете свой файл из одной папки в другую, он автоматически вносит все изменения в ваш файл импорта.
Ссылка для установки: Автоимпорт — Visual Studio Marketplace
Стоимость импорта (более 1 млн загрузок)
Как разработчик, мы должны помнить о размере пакета наших импортированных плагинов и библиотек, которые могут иметь больший размер. Чтобы проверить это, плагин стоимости импорта помогает показать вам размер импортированной сторонней библиотеки в момент ее импорта (или через несколько мгновений после этого).
Это расширение будет отображать в редакторе размер импортированного пакета. Расширение использует веб-пакет с плагином babili-webpack-plugin для определения импортированного размера.
Ссылка для установки: Стоимость импорта — Visual Studio Marketplace
Prettier — средство форматирования кода (более 11 миллионов загрузок)
Одно из моих любимых расширений, которое позволяет форматировать код по структуре, чтобы он был более читабельным и понятным.
Prettier — самоуверенный форматировщик кода. Он обеспечивает согласованный стиль, анализируя ваш код и перепечатывая его по своим собственным правилам, которые учитывают максимальную длину строки, при необходимости оборачивая код.
Prettier поддерживает 4 типа языков
- JavaScript:TypeScript · Flow · JSX · JSON
- CSS:SCSS · Меньше
- HTML: Vue · Angular
- GraphQL:уценка · YAML
Ссылка для установки: Prettier — Code formatter — Visual Studio Marketplace
Полакод (414 000 загрузок)
Это расширение поможет вам экспортировать выбранный вами код в файл изображения более элегантным и структурированным способом.
Расширение позволяет экспортировать код в png в различных цветовых темах (темный 0r светлый)
Ссылка для установки: Polacode — Visual Studio Marketplace
Живой сервер (более 10,5 млн загрузок)
Живой сервер позволяет вам создать локальный сервер разработки (например, localhost) с функцией перезагрузки в реальном времени как для статических, так и для динамических страниц. Мы можем использовать любую веб-страницу для отображения файлов в браузере. Он предоставляет функцию «Один щелчок» для запуска URL-адреса в браузере.
Ссылка для установки: Live Server — Visual Studio Marketplace
CSS Peek (1,6 млн загрузок)
CSS Peek позволяет визуализировать свойство и определение класса CSS на HTML-странице, где он определяет. Он поддерживает CSS/SCSS/LESS (классы и идентификаторы), найденные в строках в исходном коде.
Ссылка для установки: CSS Peek — Visual Studio Marketplace
Синхронизация настроек (более 2,3 млн загрузок)
Синхронизация настроек позволяет преобразовать конфигурацию настроек VScode в сущность, которая далее подключается к учетной записи GitHub, поэтому, если вам нужна такая же конфигурация на другой платформе, вы просто устанавливаете все расширения и настройки в один клик.
Синхронизация настроек становится очень удобной для обмена конфигурациями и пакетами VScode для установки, поэтому вам не нужно вручную устанавливать все темы.
Ссылка для установки: Синхронизация настроек — Visual Studio Marketplace
Пока вы читаете, вот одно бонусное расширение для вас…
Автоматическое переименование тега (4,9 млн. загрузок)
Автоматически переименовывать парные теги HTML/XML, как это делает Visual Studio IDE.
Ссылка для установки: Автопереименование тега — Visual Studio Marketplace
Это 10 лучших расширений VScode, которые я использовал, прокомментируйте ниже, какие из них вам нравятся,
Отъезд : 10 лучших тем Visual Studio Code
Спасибо, что читаете мой блог, посетите мой сайт https://iparagsaxena.in
