Лучшие плагины для VS Code. Золотой фонд веб-разработчика. Самые полезные плагины для Atom и VS Code Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server
Основной редактор которым я пользуюсь для написания кода стал 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-rainbowIntelliSense 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 для VSCodehttps://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 применяет шаблон регулярного выражения к любому открытому текстовому файлу, выделяя все совпадения. Прямо как