34 полезных расширения VS Code, которые упростят работу разработчика

Фронтенд-разработчик, UX/UI-дизайнер Савио Мартин опубликовал в блоге на dev.to 34 расширения Visual Studio Code (VS Code) для повышения продуктивности.

Вот они. 

1. Auto Rename Tag. Автоматически переименовывает парный тег «HTML/XML» так же, как Visual Studio IDE. 

2. Better Comments. Помогает создавать в коде более понятные комментарии. Расширение позволяет разбивать аннотации на следующие категории: 

• Оповещения;
Онлайн-курс Recruiter від Mate academy.
Обирайте курс Recruiter з гнучким графіком та ставайте спеціалістом у новій сфері! Допоможемо опанувати усі необхідні навички та стати профі!
Отримати знижку на курс
• Запросы;
• TODO-комментарии;
• События. 

3. Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro Snippets. Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font Awesome 4, Font Awesome 5 Free и Pro Snippets. Плагин работает как в стабильной, так и в инсайдерской сборке. 

Ознакомьтесь с курсами по фронтенд-разработке от наших друзей: Mate Academy, ШАГ и Hillel. Курсы ведут практикующие специалисты, которые помогут вам максимально быстро и качественно овладеть полезными знаниями.

4. Bracket Pair Colorizer 2. Позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены должны соответствовать и какие цвета использовать. 

5. change-case. Позволяет быстро изменить регистр текущего выделенного текста или слова. 

6. Code Runner. Запускает фрагмент или файл кода для нескольких языков (полный список доступен здесь) и пользовательские команды. 

7. Code Spell Checker. Цель расширения — проверка распространенных ошибок и уменьшение количества ложных срабатываний. Хорошо работает со стилем написания составных слов CamelCase (верблюжий регистр). 

8. CSS Peek. Разрешает просмотр идентификаторов CSS и строк классов как определений из HTML-файлов в соответствующий CSS-файл. Позволяет просматривать и переходить к определению. 

9. Debugger for Chrome. Расширение для отладки JavaScript-кода в браузере Google Chrome или других задач, поддерживающих протокол Chrome DevTools Protocol. 

10. EJS language support. Подсветка синтаксиса для тегов EJS, JavaScript и HTML. Включает автозаполнение javascript. 

11. ES7 React/Redux/GraphQL/React-Native snippets. Расширение для React, Redux и GraphQL в JavaScript/TypeScript с синтаксисом ES7 и функциями плагина Babel для VS Code. 

12. GitHub Pull Request and Issue. Позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code. 

13. GitLens — Git supercharged. Расширяет возможности Git, встроенные в VS Code. Среди функций: 

• Визуализация авторства кода с помощью аннотаций Git;
• Плавное перемещение и исследование репозитория Git;
• Получение необходимой информации с помощью команд сравнения. 

14. Google Fonts. Расширение позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код. 

15. Image Preview. Расширение для предварительного просмотр изображений при наведении курсора. 

16. GraphQL. Добавляет подсветку синтаксиса, его проверку и языковые функции, такие как: 

• Переход к определению;
• Просмотр информации о наведении и автозаполнение для проектов graphql;
• Работа с запросами, помеченными тегом gql. 
Онлайн-курс "Business English для проджект-менеджерів" від Vocabulaba.
Підсилите англійську для управління іноземними командами та вільної комунікації на співбесідах, презентаціях і зідзвонах. .
Детальніше про курс

17. vscode-styled-components. Подсветка синтаксиса и IntelliSense для стилизованных компонентов. Использует грамматику CSS, построенную на основе language-sass и language-css. 

18. Prettify JSON. Расширение Prettify JSON для Visual Studio Code. 

19. Import Cost. Позволяет отображать в редакторе размер импортированного пакета. Для этого расширение использует webpack и babili-webpack-plugin. 

20. IntelliSense для имен классов CSS в HTML. Обеспечивает завершение имени класса CSS для атрибута HTML class на основе определений, найденных в рабочей области или внешних файлах, на которые ссылается элемент link. 

21. JavaScript (ES6) code snippets. Расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS CODE. Поддерживает как JavaScript, так и TypeScript. 

22. Live Server. Запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц.

23. Live Share. Расширение для совместной разработки, редактирования и отладки в режиме реального времени. Позволяет мгновенно и безопасно делиться проектами. Разработчики, которые подключаются к сеансам, получают необходимые файлы по текущему проекту и могут начать работу без необходимости клонирования репозиториев или SDK. 

24. Markdown Preview Enhanced. Расширение для тех, кто знаком с Markdown Preview Plus или RStudio Markdown. Имеет множество полезных функций, среди которых: 

• Автосинхронизация скролла;
Онлайн-курс "Communicative Business English" від Vocabulaba.
Прокачайте професійну англійську для роботи в бізнесі та заговоріть впевнено — на співбесіді, презентації чи перемовинах.
Детальніше про курс
• Поддержка языка диаграмм PlantUML,
• Экспорт PDF,
• Создание презентация. 

25. Mongo Snippets for Node-js. Расширение для проектов Node-js. Содержит: 

• Сниппеты для подключения к документоориентированной системе управления базами данных MongoDB и запросов;
• Команду Palette Feature для настройки кода шаблона;
• Предложения по доработке для моделей Mongoose Models. 

26. npm. Поддерживает выполнение npm-скриптов, определенных в файле package.json, и проверку установленных модулей на соответствие зависимостям, определенным в package.json. 

27. npm Intellisense. Плагин Visual Studio Code, который автоматически заполняет модули nmp в операторах импорта. 

28. Placeholder Images. Расширение позволяет создавать и вставлять так называемые изображения-заполнители в HTML-код в VS Code с помощью сторонних сервисов, таких как Unsplash, placehold.it и LoremFlickr. 

29. Polacode. Позволяет делать скриншоты кода с пользовательскими шрифтами и темами. 

30. Prettier — Code formatter. Средство для форматирования кода. Нацелено на использование жестко заданных правил по оформлению программ. Обеспечивает согласованный стиль, анализируя код и повторно воспроизводя его с особыми правилами, которые принимают во внимание максимальную длину строки. 

31. Tabnine Autocomplete. Помощник на основе искусственного интеллекта (ИИ). Помогает кодировать быстрее и уменьшить количество ошибок. Изучает общедоступный код и использует алгоритмы глубокого обучения ИИ. 

32. Tailwind CSS IntelliSense. Расширяет возможности разработки Tailwind, предоставляя пользователям VS Code больше функций, например, автозаполнение, выделение синтаксиса и линтинг (процесс проверки исходного кода на программные и стилистические ошибки).

33. Luna Paint. Позволяет редактировать растровые изображения из VS Code. 

34. Quokka.js. Инструмент повышения производительности разработчика для быстрого прототипирования JavaScript/TypeScript. Значения времени выполнения обновляются и отображаются в IDE-среде рядом с кодом по мере его ввода.