10 VS Code Extensions для повышения производительности

1656021618 10 vs code extensions dlya povysheniya proizvoditelnosti

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

Некоторые из этих расширений платные, но есть множество качественных опций, доступных бесплатно на VS Code Marketplace.

В этой статье я поделюсь 10 бесплатными для вашего удовольствия от чтения. Давайте окунуться.

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

авторенаметаги

2. Красивее в VS Code

Название «Prettier» достаточно понятно – это расширение делает ваш код более красивым, форматируя его очень читаемым способом.

Вы можете выбрать форматирование кода при сохранении или вставке.

красивее

3. Преобразуйте пиксели в Rem в VS Code

Иногда вы можете захотеть, чтобы единицы измерения были в rem (root em), а не в пикселях (px) и наоборот.

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

Чтобы конвертировать из rem в px и наоборот, нажмите и удерживайте клавиши alt+z.

pxtoem

4. Шпаргалка VS Code Flexbox

Расширение шпаргалки Flexbox приносит удобную шпаргалку Flexbox прямо в VS Code.

Вы можете использовать его двумя способами: нажав Ctrl+Shift+P в Windows и Cmd+Shift+P на Mac, чтобы открыть его, или вы можете просто навести курсор на любое место, где дисплей настроен на гибку.

гнуться

5. Фрагменты сетки против расширения кода

Расширение Grid Snippets дает вам возможность кодировать в CSS Grid с помощью простых ярлыков, создающих фрагменты для вас.

Некоторые из этих ярлыков включают:

  • dg – сетка отображения
  • dig – отобразить встроенную сетку
  • gg – разрыв сетки
  • gtc – grid-template-columns
  • gta – grid-template-areas

В документах есть множество других ярлыков.

сетка

6. Колоризатор пар кронштейнов

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

На скриншоте ниже вы можете увидеть, что все скобки имеют разные цвета, чтобы вы могли отслеживать, какие именно.

скобка

7. Live Server Extension в VS Code

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

В наши дни все, что вам нужно сделать, это установить расширение Live Server с VS Code Marketplace и бум! Каждое внесенное вами изменение немедленно обновляется в браузере.

Файл, открываемый с помощью Live Server, должен быть файлом HTML. Кроме того, файл HTML должен иметь открывающие и закрывающие теги head и body.

печень

8. Иконки VS Code

Иконки VS Code – одно из моих любимых расширений. С его помощью вы увидите значок файла, представленный языком или структурой/библиотекой, на которой вы кодируете.

vscideicons

9. Полокод

С этим расширением очень интересно работать. Это позволяет делать красивые скриншоты вашего кода.

Чтобы сделать снимок экрана, просто нажмите Ctrl+Shift+P в Windows и Cmd+Shift+P на Mac, чтобы открыть палитру команд. Затем вы можете найти «Polacode» и выбрать его. Просто выделите часть, которую вы хотите сделать снимок экрана
и нажмите значок, похожий на камеру, чтобы сделать снимок экрана и сохранить его на устройстве.

polacode

10. Время кода

Code time – это расширение, которое помогает отслеживать свой прогресс и показатели прямо в VS Code.

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

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

Вы получите маленький значок, похожий на ножки, когда он установлен. Оттуда вы можете изучить все функции. Удивительно, но это не платно – бесплатно!

кодовое время

Мой друг Джой Шахеб совершил видеоверсию этой статьи. Не стесняйтесь проверить это на YouTube.

Спасибо за чтение и приятное времяпрепровождение.

Добавить комментарий

Ваш адрес email не будет опубликован.