Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Решать задачи
Это наверняка не первая подборка такого рода, попавшаяся вам на глаза. И уж точно не последняя. Но эта — моя! Я начну со своих любимых расширений для работы с 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— настройка setIntervalthenc— добавление .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».
