Расширения VS Code для JavaScript-разработчиков

Image by Engin Akyurt from Pixabay

Это наверняка не первая подборка такого рода, попавшаяся вам на глаза. И уж точно не последняя. Но эта — моя! Я начну со своих любимых расширений для работы с JavaScript, а затем перейду к помощникам в HTML/CSS.

JavaScript

Bracket Pair Colorizer

Самое первое расширение в моем списке — это настоящий клад! Оно расцвечивает пары скобок. Кажется, в этом нет ничего особенного. Но когда работаешь с глубоко вложенным кодом или огромным файлом, это настоящее спасение.

Жизнь без Bracket Pair Colorizer:

Жизнь с Bracket Pair Colorizer:

Каждая пара квадратных, круглых или фигурных скобок имеет свой цвет. В результате очень легко определить, где у вас может быть «упс!».

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

Simple React Snippets / Next.js Snippets

Написание стандартного повторяющегося кода отнимает уйму времени. Это раздражает. Simple React Snippets и Next.js Snippets облегчают «бойлерплейтную» боль.

Функциональные компоненты и хуки с Simple React Snippets:

Next.js Snippets:

Оба этих расширения содержат множество сниппетов, но у меня нет времени создавать столько гифок!

JavaScript (ES6) Code Snippets

Это расширение напоминает Simple React Snippets, но предназначено для работы с чистым JavaScript.

Эти сниппеты я использую чаще всего, но там их намного больше.

Также стоит упомянуть:

  • sti — настройка setInterval
  • thenc — добавление .then() и .catch() в promise.
  • clg — console.log()

Template String Converter

Это расширение маленькое, но мощное и полезное. Когда вы вводите ${} внутри одинарных или двойных кавычек, оно автоматически конвертирует их в обратные кавычки.

HTML & CSS

VSCode и так достаточно хорош для работы с HTML и CSS.

  • при помощи html:5 вы можете получить надежные HTML-бойлерплейты.
  • ввод a даст вам открывающий и закрывающий тег для ссылок
  • div — открывающий и закрывающий тег
  • в VS Code есть автодополнение для CSS-атрибутов
  • последнее обновление VS Code позволяет одновременно редактировать открывающий и закрывающий теги.

Но есть и несколько расширений, способных улучшить работу с HTML и CSS в VS Code!

HTML Tag Wrapper

Оборачивание уже написанного кода в новый тег постоянно меня бесило. Но теперь есть решение! Выделить код, нажать Ctrl + i — и кошмару конец.

CSS Snippets

Да, еще сниппеты! Кому ж не хочется писать меньше кода?

Длина этого списка сниппетов сравнима разве что с «Игрой престолов».

Live Sass Compiler

Да, конечно, вы можете сами его поднять и запустить в терминале всего парой команд. Ну или можно просто кликнуть сюда:

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

Вот и все! Надеюсь, вам тоже понравится что-нибудь из моих любимых расширений!

Перевод статьи «To the VSCode Extensions I Love the Most».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх