Основной редактор которым я пользуюсь для написания кода стал Visual Studio Code (сокращённо VSCode). До этого я работал в редакторе Sublime Text, который полностью удалил через две недели после того как начал юзать VSCode, просто потому что VSCode гораздо круче и быстрее.

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

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

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

Расширения для Visual Studio Code

Project Manager - Менеджер проектов

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

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

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

Я лично сделал свой вклад в разработку расширения Project Manager - сделал его мультиязычным и добавил русский язык, так что теперь оно доступно на русском языке.

Bookmarks - Закладки

Ещё одно расширение для VSCode от Alessandro Fragnani .

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

Закладки имеют собственную панель проводника и иконку на левой панели меню, что обеспечивает быстрый доступ к закладкам. Их можно добавлять неограниченное количество.

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

Так же как и для Project Manager, я сделал свой вклад в разработку и этого расширения - сделал мультиязычным и добавил в него русский язык.

Расширение добавляет возможность быстро открывать в браузере файлы html.

С этим расширением не нужно долго возиться чтобы открыть файл в браузере.

Если файл открыт в редакторе и находится в активном состоянии - достаточно нажать комбинацию клавиш Alt + B и файл откроется в браузере по умолчанию.

Если нажать комбинацию клавиш Shift + Alt + B - то в командной строке редактора появится список браузеров где можно выбрать в каком конкретно браузере нужно открыть файл.

Запоминать упомянутые выше комбинации клавиш вам не нужно - достаточно нажать правую кнопку мыши и в контекстном меню есть соответствующие пункты, чтобы открыть файл в браузере по умолчанию или выбрать браузер из списка. При чём можно открывать не только активные файлы (открытые в редакторе), но и файлы из панели проводника.

Path Intellisense

Path Intellisense - данный плагин для Visual Studio Code, который автоматически заполняет имена файлов.

Аналогичное расширение Path Autocomplete.

Выполняет тот же функционал что и Path Intellisense , добавляя путь и имена файлов.

В настоящее время у меня отключен Path Intellisense , а включен . Я тестирую какое из этих двух расширений быстрее реагирует и даёт подсказки в интелесенс. Пока мне больше нравится , впечатление что он быстрее.

file-size

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

Я искал настройку в параметрах VSCode, чтобы отображать размер файла, но не нашёл. Зато данная небольшая утилита решает эту проблему и выводит в статус-баре редактора информацию о размере файла.

htmltagwrap

Это расширение делает обёртку выделенного фрагмента тэгами HTML.

Всё просто - выделяем фрагмент или строку и команда сочетанием клавиш Alt + W

Если привыкнуть и запомнить команду, то очень круто.

Active File In Status Bar

Выводит в статус-баре редактора путь к файлу. При клике - копирует путь к файлу в буфер обмена.

Bracket Pair Colorizer

Данный плагин позволяет задать цвет для каждой пары скобок, что позволяет визуально контролировать вложенность или правила условий в коде. Работает для круглых (), фигурных {} и квадратных скобок .

До установки этого плагина у меня были проблемы с закрытием скобок, теперь я по цвету вижу вложенность скобок.

Иконки файлов и папок

VSCode simpler Icons with Angular

Это коллекция иконок для файлов. Я много пересмотрел иконок, но остановился на данной сборке, т.к. здесь стилизованы папки только для node_modules и bower. В других же сборках разные папки (например: images, js, css и т.д.) имеют свои красивые иконки, но при этом трудно быстро отличить папку от файла, а здесь всё просто - в дереве папок и файлов я чётко вижу где открытая папка, а где закрытая.

Подобных наборов очень много на Marketplace, так что можете сами посмотреть и подобрать подходящие для вас стили иконок. Можно поставить сразу много коллекций. Изменить иконки легко - настройка для смены иконок находится в меню на шестерёнке расположенной внизу в тулбаре:

Выбираете пункт Тема значков файлов и в командной строке редактора появятся установленные у вас темы значков файлов. Три темы дефолтных от VSCode и то что вы добавите. В списке просто стрелками вверх-вниз листайте темы и иконки тут же будут применяться и отображается в проводнике на файлах. Так быстро подберёте ту тему которая вам нравится.

Повторюсь, что мне понравилась тема VSCode simpler Icons with Angular

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

Для этого в статус баре редактора расположена кнопка для запуска. После клика по ней - открывает файл в браузере и следит за изменениями в файлах. При изменении файлов автоматически перезагружает страницу в браузере.

Лично я предпочитаю работать с Browsersync через Gulp, который шустрее, функциональней и создаёт меньше нагрузок, но так как не всегда и не в каждый проект устанавливается Gulp, то находится работа и для расширения Live Server.

Профилированные расширения для VSCode

А теперь предложу список расширений для VSCode для специфических направлений.

Работа с Git и Github

Помимо того что VSCode по умолчанию работает с гитом, на Marketplace есть очень много расширений на самый любой вкус для работы с Git и Github. Я меня стоят такие:

Git History, GitLens, Git Merger, GitHub Pull Requests

RemoteFS

Это расширение позволяет подключаться к серверу по FTP и SFTP протоколам.

Всё что нужно для того чтобы открыть сайт или проект находящийся на сервере - это в файле settings.json добавить следующую настройку:

"remotefs.remote": { "первый сайт": { "scheme": "ftp", "host": "Хост", "port": 21, "username": "FTP логин", "password": "Пароль", "rootPath": "/", "connectTimeout": 10000 }, "второй сайт": { "scheme": "ftp", "host": "Хост", "port": 21, "username": "пользователь FTP", "password": "Пароль", "rootPath": "/", "connectTimeout": 10000 } }

Данные для подключения можно получить на вашем хостинге в разделе Пользователи FTP . Я специально показал макет подключение для двух сайтов - по такой схеме можно подключать сколько угодно сайтов по разным протоколам (FTP или SFTP).

Текстовые редакторы, созданные на основе web-технологий, переживают настоящий бум. Atom, VS Code, Brackets, подобно монстрам рока, завоевывают популярность среди web-разработчиков (погоди, какой там сейчас на календаре год у «популярных монстров рока»? 🙂 - Прим. ред.). На них переходят как с IDE, так и просто с нативных редакторов. Причина предельно проста: репозитории кишат полезными плагинами, а недостающие каждый может создавать самостоятельно, применяя сугубо web-технологии.

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

На вкус автора

Ваш покорный слуга использовал все перечисленные редакторы и в итоге остановился на VS Code. Причин тут несколько, но главная - производительность. В Microsoft отлично постарались и, несмотря на поздний выход (VS Code появился на сцене последним), успели собрать вокруг себя огромное сообщество. Это положительно отразилось на плагинах: некоторые из них, на мой взгляд, на голову выше альтернатив для Atom. В связи с этим в тексте обзора будут мелькать названия расширений именно для VS Code. Ссылка на приближенный по функциональности вариант для Atom будет приведена ниже. Не удивляйся, если, скопировав название плагина и запустив поиск по репозиторию Atom, ты ничего не найдешь. Используй ссылки из описания.

Причины популярности

Редакторы, построенные на веб-технологиях, имеют приблизительно одни и те же проблемы. Одна из основных - производительность. Разработчики трудятся над скоростью работы редакторов, но будем честными - с этой проблемой вряд ли удастся справиться на 100%. Нативные решения по-прежнему обгоняют в быстродействии, и это стоит учитывать при выборе редактора.

Ну хорошо, производительность нативных решений вне конкуренции. За счет чего тогда новоиспеченные «легковесные» редакторы покорили столько сердец разработчиков? Главный аргумент «за» - технологический стек. Что значит разработать плагин для какого-нибудь Sublime или Notepad? Правильно, придется разобраться с C , Python (здесь может быть любой другой язык программирования), SDK редактора и другими не нужными по основной работе вещами.

Какой веб-разработчик согласится на этот подвиг? У него своих забот и технологий хватает (во фронтенде происходит настоящая революция решений). Вот и получилось, что экосистема плагинов для веб-разработчиков у нативных редакторов всегда страдала нехваткой профильных решений.

Идея создания редакторов на веб-технологиях для мастеров этих же технологий эффективно решила проблему бедной экосистемы сторонних модулей. Сторонние веб-разработчики быстро подхватили волну и приступили к созданию необходимых им примочек. Результаты нетрудно проследить - официальные репозитории набиты плагинами для самых разнообразных задач. Создавать новые плагины стало проще: больше не надо учить чужеродный язык программирования, JavaScript вполне достаточно.

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

Сниппеты

Плагины-сниппеты - отдельный класс расширений для редакторов. Они пользуются дикой популярностью, и практически под каждый современный фреймворк или библиотеку в репозиториях есть индивидуальное предложение. Сниппеты экономят время. Требуется описать заготовку класса? Нет проблем, вводим пару символов и получаем несколько строк готового кода. Подробно разбирать плагины-сниппеты смысла нет - их слишком много. Приведем несколько ссылок на плагины-сниппеты по популярным технологиям. Недостающие найдешь сам.

VS Code:

Atom:

Обертка для HTML

При описании разметки страницы постоянно приходится оборачивать блоки, то есть вкладывать один блок в другой. Написал разметку блока, а потом понял, что для удобства стилизации лучше обернуть его в дополнительный блок. Сделать несложно: пишем открывающий тег в самом начале, проматываем блок до конца и ставим закрывающий тег. Есть только одна проблема - на больших блоках это делать неудобно. Есть все шансы поставить «закрывашку» не туда и поломать разметку. Аналогичная проблема появляется при стилизации отдельных кусков текста. Попробуй быстро вставить многочисленные открывающие и закрывающие теги и не сойти с ума. Справиться с трудностями помогут плагины htmltagWrap и Atom wrap in tag . С их помощью решение сведется к выделению куска кода/строки и нажатию комбинации горячих клавиш.

• VS Code: htmltagwrap
• Atom: Atom wrap in tag

Привыкаем к горячим клавишам

При переходе на новый редактор/IDE всегда сталкиваешься с одной и той же проблемой - надо учить новые горячие клавиши. Только привык к одним комбинациям, как бац - и все по-другому. На привычные действия начинаешь тратить больше времени, чем обычно, и лишний раз задумываешься, целесообразно ли вообще переходить на что-то новое. Уверен, разработчики, кто начинал свою карьеру 10–15 лет назад, неоднократно сталкивались с подобным, поэтому они однозначно оценят мощь плагинов с биндингами клавиш популярных редакторов. Суть проста: привык к раскладке горячих клавиш Visual Studio - качаешь соответствующий плагин, и новый редактор начинает отзываться на привычные команды.

VS Code:

Atom:

Автокомплит для файлов

По умолчанию ни один из редакторов не предоставляет функции автозавершения имен файлов во время их подключения. Часто это бывает причиной ошибок. Приходится помнить полный путь к месторасположению файла. Если проект сложней, чем Hello world, то файлы сгруппированы по нескольким директориям, и для указания пути придется пользоваться услугами менеджера файлов. Не очень удобно. Проще подключить автокомплит с помощью плагинов AutoFileName и autocomplete+. Затем останется только набирать первые буквы имени файла/директории, после чего плагин предложит варианты для подстановки.

• VS Code: AutoFileName
• Atom: autocomplete+ paths suggestions

Линтеры

Современный процесс разработки немыслим без автоматизации. Если что-то можно автоматизировать и переложить на инструменты - это стоит сделать. Без всевозможных линтеров во фронтенде никуда, поэтому при работе над очередным проектом надо сразу позаботиться о подключении решений вроде ESLint, HTMLHint, CSSLint, <твой_линтер>. Линтеры контролируют стиль написания кода и в случае несоответствия конфигу моментально укажут на ошибки.

Особенно полезны линтеры в командной разработке, когда шансы получить «разношерстный» код увеличиваются в разы. Нужны примеры? Пожалуйста! Между JS-разработчиками постоянно идет спор о выборе кавычек. Одни - приверженцы одинарных, другие - двойных, а третьи поддерживают идею обратных. Линтеры помогут добиться единообразия и вовремя оповестить разработчика, сбившегося с пути.

Продолжение доступно только участникам

Вариант 1. Присоединись к сообществу «сайт», чтобы читать все материалы на сайте

Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», увеличит личную накопительную скидку и позволит накапливать профессиональный рейтинг Xakep Score!

Давайте поговорим о Code  - . Мои дорогие читатели попросили меня рассказать о тех расширения, которые я использую для разработки. Этим мы сейчас и займёмся.
Ссылка на загрузку VSC: https://code.visualstudio.com/ Наш VSC будет пятирогим лазеростреляющим единорогом -после того как мы снабдим его самыми полезными расширения, которыми я пользуюсь каждый день. О, а если вы еще не используете замечательный редактор VSC, под картинкой выше есть ссылка на официальный сайт, с которого его можно загрузить.
Material Theme

Material Theme

Самая эпичная тема для Visual Studio Code:
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Auto Import

Автоматически находит, парсит и дополняет названия методов и событий для всех доступных файлов. Поддерживает Typescript и TSX.
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Import Cost

Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Indent-Rainbow

Простое расширение, которое делает отступы более читабельными. https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

IntelliSense for CSS class names in HTML

Расширение VSCode, которое автоматически дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных в вашей рабочей области или внешних файлов, на которые ссылается элемент link .
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

SVG Viewer

Простой способ предпросмотра SVG.
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

Prettier - Code formatter

Не могу жить без него - пакет VSCode для форматирования JavaScript / TypeScript / CSS с использованием Prettier .
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native Tools

Подсказки, отладка и встроенные команды для React Native.
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Sublime Text Keymap and Settings Importer

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings Это расширение позволяет в VSCode использовать горячие клавиши Sublime Text 3. Попробуйте потестировать его, открыв консоль сочетанием клавиш: cmd ⌘ + P - Mac ctrl + P - Windows
В этой консоли можно быстро перейти к файлам, а также, если добавить символ > перед поисковой строкой, можно искать действия, такие как переключение встроенного терминал, установку расширения и так далее. Очень удобная штука для тех из нас, кто привык к ST3. ?

npm Intellisense

Плагин VSCode, который автоматически дополняет имена модулей npm в операциях импорта.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

lit-html

Добавляет подсветку синтаксиса и поддержку разметки HTML внутри строк JavaScript и TypeScript, как это используется в lit-html и других фреймворках.
https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

highlight-matching-tag

Это расширение предназначено для подсветки парных открывающих или закрывающих тегов - функциональности, отсутствующей в VSCode, но которая должна бы быть встроена в редактор из коробки.
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

GitLens - Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens Это расширение перезагружает встроенные возможности Visual Studio Code по работе с Git. Оно в наглядном виде предоставляет информацию об авторстве изменений в Git, а также облегчает перемещение по репозиториям и позволяет отслеживать историю изменений файлов или веток, использовать команды сравнения кода и многое другое.

Git Project Manager

Git Project Manager (GPM) - это расширение Microsoft VSCode, которое позволяет вам открыть новое окно на основе git-репозитория непосредственно из VSCode.
https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

Git History

Просмотр логов git и истории изменения файлов и сравнение веток или коммитов.
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

File Utils

Удобный способ создания, дублирования, перемещения, переименования и удаления файлов и каталогов.
https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

Bracket Pair Colorizer

Настраиваемое расширение для раскрашивания парных скобок. Крайне полезно при работе с большим количеством обратных вызовов.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Color Highlight

Это расширение подсвечивает CSS / веб-цвета, найденные в вашем документе.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSS Peek

Переход к CSS-свойствам идентификаторов (id) и классов непосредственно из файлов HTML. Поддерживает переключение и между файлами и быстрый переход из одного в другой.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Debugger for Chrome

Инструмент для отладки JavaScript-кода или любого другого кода в браузере Chrome.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Quokka.js

Выполняет JavaScript-код в консоли параллельно с тем, как вы его пишете. (Полезно для быстрых демонстраций).
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Trailing Spaces

Мгновенно выделяет и удаляет конечные пробелы.
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

TypeScript Hero

https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero Это расширение пригодится всем, кто пишет на TypeScript и хочет, чтобы VSC организовал импорты за него.

WakaTime

Метрики, инсайты и отслеживание времени, автоматически генерируемые на основании статистики вашей работы по программированию.
https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

Vetur

Поддержка Vue для VSCode
https://marketplace.visualstudio.com/items?itemName=octref.vetur

Code Runner

Запустите фрагмент кода или целый файл сразу в нескольких языках.
Благодарю вас за то, что прочитали эту статью! Переходите по ссылке в твиттере, чтобы узнать о других расширениях VSCode. Знаете еще какие-то полезные плагины, которые не упомянуты здесь? Пожалуйста, пишите их в комментариях❤ https://twitter.com/wesbos/status/907347014823923714 Перевод статьи : “✨

Code Time - это плагин с открытым исходным кодом, который предоставляет метрики прямо в редакторе кода.

После установки расширения будет предложено войти в панель управления. Если внутри редактора кода вы нажмете command + shift + P , откроется окно, в котором можно ввести Code Time , а затем выбрать между отображением данных в редакторе кода или в браузере.

Внутри браузера информация будет выглядеть так:

Внутри браузера красочнее:

Code Time полезен, если вам нужно точно знать или просто интересно, сколько времени вы тратите на написание кода.

One Dark Pro

One Dark Pro одна из самых популярных и часто загружаемых тем для Visual Studio Code.

В этом примере видно, что у нас есть значки для каталогов, таких как клиент и сервер, а также для файлов, таких как .eslintrc .gitignore и package.json .

One Dark Pro поддерживается в React, Angular, Redux и множестве различных фреймворков и библиотек, предоставляя различные значки каталогов для компонентов, утилит, стилей, а также для редюсеров (Reducers), действий (Actions) и хранилищ (Store).

Bracket Pair Colorizer

Это расширение позволяет сопоставлять скобки с цветами. Это удобно, когда у вас есть глубоко вложенные объекты или функции, как показано здесь:

Color Highlight

Color Highlight показывает визуальное представление любого цветового кода. Например, если вы введете RGB, RGBa, шестнадцатеричный или любой другой цветовой код, можно увидеть цвет, как в этом примере:

Path Intellisense

Path Intellisense - это плагин, который автоматически завершает имена файлов.

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

ES7 React/Redux/GraphQL/React-Native фрагменты

Следующее расширение - ES7 React/Redux/GraphQL/React-Native фрагменты. Длинное название, но сэкономит вам много времени, особенно если вы используете его в React.

Это расширение предоставляет фрагменты JavaScript и React/Redux в ES7 с функциями плагина Babel для VS Code.

Прямо в редакторе кода можно нажать command + shift + P , а затем ES7 Snippet Search , вы увидите длинный список коротких команд, которые можно запустить, чтобы получить более длинные фрагменты кода.

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

GitLens - Git supercharged

GitLens расширяет возможности Git, встроенные в Visual Studio Code. Помогает с первого взгляда определить автора кода с помощью аннотаций Git-blame и code lens, легко перемещаться и изучать репозитории Git, получать ценные сведения с помощью команд сравнения и многое другое. Нажав на строку кода, вы увидите, кто его редактировал, когда его редактировали и в каком коммите.

Visual Studio Code - бесплатный, кроссплатформенный текстовый редактор от Microsoft, ставший популярным благодаря легковесности, мощному и расширяемому функционалу и, конечно же, "халявности", в отличие от PHPStorm, Sublime и др.

Как и большинство современных IDE, VSCode имеет множество дополнений, расширяющих его исходные возможности. Мы отобрали 15 плагинов, которые будут полезны любому программисту, работающему в этом редакторе.

Open-In-Browser

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

Quokka

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

Faker

Позволяет быстро вставлять случайные данные (произвольные имена, адреса, изображения, телефонные номера и др.) в код. У каждой категории есть свои подразделы, что позволяет более точно подстроиться под потребности программиста.

CSS Peek

С этим плагином вы можете отслеживать определения классов и id в CSS файле. Для этого нужно нажать правой кнопкой мыши на селекторе в вашем HTML файле и выбрать Go to Definition (Перейти к определению) или Peek definition (Подсмотреть определение).

HTML Boilerplate

HTML Boilerplate упрощает работу с HTML, избавляя от необходимости самому писать теги head и body . Наберите в пустом файле html , нажмите на на клавишу Tab и Visual Studio Code сгенерирует шаблон документа!

Prettier

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

Color Info

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

SVG Viewer

Это расширение позволит работать с SVG файлами: вы cможете редактировать SVG файлы, конвертировать их в PNG формат и создавать data URL схемы.

TODO Highlight

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

Шрифты с иконками

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

Minify

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

Change Case

VS Code позволяет приводить выделенное только к верхнему и нижнему регистрам. С помощью Change Case , вы получите доступ к большому количеству регистров (змеиный, верблюжий и др.).

Regex Previewer

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