Подборка расширений для Visual Studio Code

0

Intro

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

Так же, как и большинство IDE, VSCode имеет свой магазин расширений, содержащий тысячи плагинов различного качества. Чтобы помочь вам выбрать те, которые стоит скачать, мы сделали эту коллекцию расширений, которые мы нашли наиболее полезными и интиресными.

1

Open-In-Browser

VSCode не предлагает встроенный интерфейс для открытия файлов непосредственно в браузере. Это расширение добавляет элемент контекстного меню «Открыть в браузере» в контекстное меню, а также команды для открытия в выбранном клиенте (Firefox, Chrome, IE).

2

Quokka

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

3

Faker

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

4

CSS Peek

Используя это расширение, вы можете отслеживать определения классов CSS и идентификаторов в своих таблицах стилей. Когда вы щелкните правой кнопкой мыши на селекторе в своих HTML-файлах, выберите опции «Перейти к определению», а определение «Peek» отправит вам код CSS, в котором вы их создали.

5

HTML Boilerplate

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

6

Prettier

Prettier является самым популярным форматором кода среди веб-разработчиков. Он позволяет коду вашей команды выглядеть одинаково, независимо от того, кто его написал. Это расширение позволяет автоматически применять Prettier и быстро форматировать все документы JS и CSS. Если вы также хотите использовать ESLint, есть Prettier — Eslint.

7

Color Info

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

8

SVG Viewer

Это расширение добавляет ряд функций для работы с SVG в Visual Studio Code. Это позволяет отображать SVG-файлы и посмотреть, как они выглядят, не выходя из редактора. Существуют также варианты преобразования в PNG и создания схем URI данных.

9

TODO Highlight

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

10

Icon Fonts

Крошечные сниппеты для включения шрифтов значков в вашем проекте (из CDN), а затем добавления самих значков. Расширение поддерживает более 20 популярных наборов иконок, включая шрифты Awesome, Ionicons, Glyphicons и Material Design Icons.

11

Minify

Расширение для минимизации кода. Он предлагает тонну настроек настройки и возможность автоматического минимизации при сохранении и экспорте в файл .min. Minify работает с JavaScript, CSS и HTML через uglify-js, clean-css и html-minifier соответственно.

12

Change Case

VSCode имеет ограниченные возможности для преобразования текста. Из коробки он может делать только строчные и прописные преобразования. Этот плагин добавляет намного больше команд для модификации строк, включая camelCase, kebab-case, snake_case, CONST_CASE и другие.

13

Regex Previewer

Полезный инструмент для тестирования ваших регулярных выражений. Он работает, применяя шаблон регулярного выражения над любым текстовым файлом, открытым в редакторе, выделяя все совпадения. Как будто RegExr, но прямо внутри вашего редактора!

14

Language and Framework Packs

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

Language and Framework Packs

15

Themes

Конечно, наиболее важными из всех расширений являются темы. Вы будете смотреть на свой редактор VSCode каждый день, почему бы не сделать его более красивым? Существует множество настраиваемых плагинов, которые меняют цветовую схему и значки на боковой панели. Вот некоторые из наших любимых:

VSCode Themes

Похожие публикации

Комментарии

  1. Макс 15.11.2018 в 13:55

    Раньше на Sublime часто пользовался плагином eCSStractor. Перейдя на VSCode аналогов не нашел, и вот недавно его портировали. Очень полезно для фронтендера! «eCSStractor for VSCode» https://goo.gl/hPFFKx

    1. Just Programmer 16.11.2018 в 14:47

      Да, плагин действительно полезный! 😉