Топ-15 плагинов для Visual Studio Code

Представляем вашему вниманию подборку 15 расширений для Visual Studio Code (VSCode), которые пригодятся программисту любого уровня.

Для тех, кто не в курсе, Visual Studio Code – это бесплатный и кроссплатформенный текстовый редактор, созданный компанией Microsoft. Он достаточно быстро стал «народным любимцем», ввиду его высокой производительности и обильного функционала.

Как и большинство современных IDE, VSCode имеет перманентно развивающийся рынок устанавливаемых дополнений, расширяющих исходные возможности редактора. Для того, чтобы разобраться, на какие именно плагины стоит обратить внимания, ресурс «Библиотека программиста» представляет вашему вниманию подборку 15 плагинов для Visual Studio Code, которые будут полезны любому программисту.

1. Open-In-Browser

По умолчанию, Visual Studio Code не предусматривает возможности открывать файл в любом выбранном браузере. Данное расширение не только добавляет функцию Открыть в браузере по умолчанию, но также позволяет открывать файлы в любом имеющемся у вас браузере (Firefox, Chrome, IE).

[video width="768" height="372" mp4="https://media.proglib.io/wp-uploads/2017/07/open-in-browser.mp4"][/video]

2. Quokka

Quokka – это утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода. Она выдает вам результаты выполнения функций и посчитанные значения переменных. Расширение легко настроить, и оно запускается из того же ящика, что и JSX или Typescript проекты.

[video width="768" height="348" mp4="https://media.proglib.io/wp-uploads/2017/07/quokka.mp4"][/video]

3. Faker

Быстро вставляйте случайные данные при помощи знаменитой библиотеки Javascript Faker. Вы можете вставлять произвольные имена, адреса, изображения, телефонные номера и даже отрывки известных литературных произведений. Каждая категория имеет свои подкатегории, что позволяет вам выбрать наиболее подходящий вариант.

[video width="768" height="388" mp4="https://media.proglib.io/wp-uploads/2017/07/faker.mp4"][/video]

4. CSS Peek

С этим плагином вы можете отслеживать определения CSS классов и id таблиц стилей. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией Перейти к определению или Подсмотреть определение.

[video width="768" height="322" mp4="https://media.proglib.io/wp-uploads/2017/07/css-peek.mp4"][/video]

5. HTML Boilerplate

Это расширение упрощает работу с HTML файлами, избавляя вас от необходимости прописывать теги head и body вручную. Просто наберите в пустом файле html, нажмите на Tab, и VS Code сам сгенерирует шаблон вашего документа.

[video width="768" height="422" mp4="https://media.proglib.io/wp-uploads/2017/07/html-boilerplate.mp4"][/video]

6. Prettier

На сегодняшний день, Prettier – самый популярный редактор кода в мире веб-разработки. Он позволяет приводить код, написанный несколькими людьми, к единообразному виду. В настройках Prettier можно установить автоматический запуск, что позволяет моментально форматировать JS и CSS документы.

[video width="1300" height="796" mp4="https://media.proglib.io/wp-uploads/2017/07/prettier.mp4"][/video]

7. Color Info

Небольшой плагин, который даёт вам возможность получать краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как этот цвет выглядит, а также получить всю информацию о трансляции данного цвета в разные форматы (hex, rgb, hsl и cmyk).

[video width="768" height="366" mp4="https://media.proglib.io/wp-uploads/2017/07/color-info.mp4"][/video]

8. SVG Viewer

Это расширение привносит в VS Code возможность работать с SVG файлами. С помощью SVG Viewer, вы можете редактировать SVG файлы, конвертировать их в PNG и создавать data URL схемы.

[video width="768" height="390" mp4="https://media.proglib.io/wp-uploads/2017/07/svgviewer.mp4"][/video]

9. TODO Highlight

Данная программа позволяет вам проставлять метки всем недоделанным местам в коде, что упрощает дальнейшую работу над проектом. По умолчанию, метки могут быть только TODO (доделать) и FIXME (исправить), но при желании вы можете создавать и свои типы меток.

[video width="768" height="378" mp4="https://media.proglib.io/wp-uploads/2017/07/todo-highlight.mp4"][/video]

10. Шрифты

Небольшое дополнение, добавляющее в VS Code поддержку около 20 популярных шрифтов, в частности, Font Awesome, Ionicons, Glyphicons, and Material Design.

[video width="768" height="348" mp4="https://media.proglib.io/wp-uploads/2017/07/icon-fonts.mp4"][/video]

11. Minify

Minify является утилитой, предлагающей массу возможностей по оптимизации и сжатию размеров кода. Minify работает с HTML, JS и CSS файлами и также отлично сочетается с такими плагинами, как uglify-js, clean-css и html-minifier.

[video width="768" height="370" mp4="https://media.proglib.io/wp-uploads/2017/07/minify.mp4"][/video]

12. Change Case

Так, пришло время немного расслабиться. Если все рассматриваемые до этого расширения были ориентированы на какое-то практическое применение, то эта утилита позволяет немного побаловаться с регистрами. По умолчанию, VS Code имеет только функции приведения к верхнему и нижнему регистру, но, установив себе Change Case, вы получите доступ к довольно обширному количеству регистров, к примеру, змеиный регистр, верблюжий регистр и прочее.

[video width="768" height="328" mp4="https://media.proglib.io/wp-uploads/2017/07/change-case.mp4"][/video]

13. Regex Previewer

Очень полезный инструмент, который позволяет вам работать с регулярными выражениями прямо в текстовом редакторе. Он принимает на вход два регулярных выражения и выдаёт результаты сравнения. Принцип работы чем-то похож на RegExr.

[video width="768" height="364" mp4="https://media.proglib.io/wp-uploads/2017/07/regex-previewer.mp4"][/video]

14. Языки программирования и фреймворки

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

15. Темы

Вот и дошли до самого вкусного. Ведь вы собираетесь много работать в VS Code, так почему бы для начала не сделать его красивым? Есть тонны отличных тем, но мы отобрали 4 фаворита:

• One Monokai
• Aglia
• One Dark
• Material Icon