Полезные плагины для visual studio 2013

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• One Monokai
• Aglia
• One Dark
• Material Icon

Если в качестве IDE ты используешь Visual Studio Code, у тебя есть возможность
сделать свою работу намного продуктивнее, установив правильные плагины. Ты
можешь скачать их с официального маркерплейса, а мы поможем с выбором. Поехали!

Сей продукт
является одним из самых загружаемых (3 200 000 скачиваний) и полезных плагинов, которые ты
можешь использовать вкупе с Visual Studio Code.

Инструмент создан в помощь разработчикам для интеллектуального
автодополнения кода со встроенной поддержкой широкого спектра ЯП.

В VS Intellicode используется машинное обучение для поиска
шаблонов, используемых в публичных проектах на гитхабе, которые потом
предлагаются тебе во время работы.

Кто это натворил?!

Нередко нужно выяснить, кто написал этот
кусок кода. Git
Blame
спешит на помощь. Данный инструмент подскажет, кто последним что-то правил в
конкретной строке. Кроме того, ты сможешь увидеть, в каком коммите это произошло.

Очень полезная штука, особенно при работе с
чем-то вроде feature branches (изолированная работа каждого разработчика над
своей задачей). При использовании feature branches ты ссылаешься на тикет с
именем твоей ветки. Поскольку Git
Blame сообщает все вплоть до коммита, и, соответственно, до ветки, очень просто выявить нужную строку с изменениями.

Prettier является одним из лучших плагинов для
разработчиков, которые хотят следовать хорошо продуманному набору правил написания
кода. Это крутой инструмент для форматирования кода, который позволяет
структурировать написанное, следуя строго заданным правилам.

Prettier работает с JavaScript, TypeScript, HTML, CSS, Markdown и GraphQL.

Каждый веб-разработчик, скорее всего, работал с
одним из различных JavaScript-стеков. Независимо от того, какой набор у тебя, написание
одного и того же кода в разных проектах понижает производительность.

Code
snippets – удобный плагин, предоставляющий заготовленные разработчиками
популярные фрагменты JS-кода. Данный инструмент умеет биндить стандартные
вызовы JavaScript с простыми горячими клавишами. Когда ты все
настроишь и прицепишь часто используемый код к хоткеям, рабочий процесс должен
пойти веселее.

Как ты, наверное, уже догадался, этот плагин помогает
работать с таблицами стилей. Sass умеет
выделять синтаксис, в нем включен автоотступ и автозаполнение, а также
присутствует форматирование кода и немного дополнительных шаблонов стилей.

Полезная вещь, которая должна быть в твоем
арсенале.

Path Intellisense – один из тех инструментов,
которые обеспечивают повышение производительности в Visual
Studio Code. Если ты работаешь над большим количеством проектов, то, очевидно, юзаешь
много разных технологий. В таком случае тебе нужен помощник, который будет
запоминать гору разных путей в ФС.

Path Intellisence задумывался как простенькое
расширение для автоматического заполнения имен файлов, но со временем его
оценили многие разработчики. Этот плагин сэкономит массу времени, которое было
бы потрачено на путешествие по папкам ОС.

Ты дебажил код в Chrome? Больше не придется покидать Visual Studio Code для отладки JavaScript. Debugger for Chrome,
выпущенный корпорацией Майкрософт, позволяет отлаживать исходники непосредственно
в коде Visual
Studio Code.

ESLint – это мощная штука, которая статически
анализирует твой код для оперативного поиска проблем. Плагин интегрируется в
код самостоятельно.

Большинство проблем, которые находит данный инструмент, могут
быть автоматически исправлены. Среди них есть и синтаксис: ты больше не будешь испытывать боль от ошибок, вызванных алгоритмами поиска и замены. Вдобавок, плагин имеет массу настроек «под себя».

Расширение добавляет набор утилит для работы с SVG в
коде. Этот продукт позволяет рендерить SVG-файлы не выходя из
редактора. Кроме того, этот плагин имеет возможность конвертировать файлы в PNG и
генерировать URI schemes.

Поскольку
ты смотришь в окно своего редактора каждый день, почему бы не сделать его более
привлекательным? Есть тонны плагинов, которые изменяют цветовую схему и значки
сайдбара. Некоторые популярные темы доступны совершенно бесплатно: One
Monokai, One
Dark Pro и Material
Icon.

Есть любимые инструменты в Visual Studio Code? Делись 😉