Visual Studio Code - бесплатный, кроссплатформенный текстовый редактор от Microsoft, ставший популярным благодаря легковесности, мощному и расширяемому функционалу и, конечно же, "халявности", в отличие от PHPStorm, Sublime и др.
Как и большинство современных IDE, VSCode имеет множество дополнений, расширяющих его исходные возможности. Мы отобрали 15 плагинов, которые будут полезны любому программисту, работающему в этом редакторе.
По умолчанию, в Visual Studio Code нет возможности открыть файл в браузере. Данное расширение не только добавляет функцию "Открыть в браузере", но и позволит открыть файлы в любом установленном на компьютере браузере.
Quokka - утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода, выдавая результаты выполнения функций и подсчитанные значения переменных. Расширение легко настраивается и работает из коробки с JSX или Typescript проектами.
Позволяет быстро вставлять случайные данные (произвольные имена, адреса, изображения, телефонные номера и др.) в код. У каждой категории есть свои подразделы, что позволяет более точно подстроиться под потребности программиста.
С этим плагином вы можете отслеживать определения классов и id в CSS файле. Для этого нужно нажать правой кнопкой мыши на селекторе в вашем HTML файле и выбрать Go to Definition (Перейти к определению) или Peek definition (Подсмотреть определение).
HTML Boilerplate упрощает работу с HTML, избавляя от необходимости самому писать теги head и body. Наберите в пустом файле html, нажмите на на клавишу Tab и Visual Studio Code сгенерирует шаблон документа!
Prettier – популярный у web-разработчиков редактор кода, позволяющий приводить код, написанный разными людьми, к единому виду. В настройках Prettier можно установить автозапуск, что позволит сразу форматировать код, написанный на JS и CSS.
Небольшой плагин, который выдает краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как он выглядит и как его написать в других цветовых форматах (hex, rgb, hsl и cmyk).
Это расширение позволит работать с SVG файлами: вы cможете редактировать SVG файлы, конвертировать их в PNG формат и создавать data URL схемы.
Это дополнение позволяет вам проставлять метки в недоделанные места в коде, что упрощает над проектом. По умолчанию, заданы только метки TODO (доделать) и FIXME (исправить), но вы можете создавать и свои собственные типы меток.
Расширение, добавляющее в Visual Studio Code поддержку около 20 популярных иконочных шрифтов, в том числе Font Awesome, Ionicons, Glyphicons, Material Design...
Утилита для оптимизации и сжатию кода. Minify работает с HTML, JS и CSS файлами и отлично сочетается с такими плагинами, как uglify-js, clean-css и html-minifier.
VS Code позволяет приводить выделенное только к верхнему и нижнему регистрам. С помощью Change Case, вы получите доступ к большому количеству регистров (змеиный, верблюжий и др.).
Дополнение, позволяющее работать с регулярными выражениями. Regex Previewer применяет шаблон регулярного выражения к любому открытому текстовому файлу, выделяя все совпадения. Прямо как RegExr, но теперь уже в вашем редакторе!
Языки программирования и фреймворки
VS Code поддерживает большое количество языков и фреймворков, тем не менее, если используемый вами язык/фреймворк отсутствует, то вы всегда можете скачать его с поддержкой таких фич, как автозаполнение, правильные отступы и др. Такие web-фреймворки, как React Native и Vue также доступны для скачивания.
Темы
Помимо основных, для VS Code существует множество других тем. Вот самые лучшие из них: One Monokai, Aglia, One Dark, Material Icon.