Плагины для visual studio code. ✨ Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень. Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server

Текстовые редакторы, созданные на основе 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!

Рассмотрим лучшие плагины редактора Visual Studio Code для Web-разработки в 2020 году.

1. Live Server
2. Auto Close Tag
3. Import Cost
4. Material Theme
5. Apache Conf
6. Russian Language Pack
7. Небольшой бонус

1. Live Server

Включение Live Server для.html или.htm файлов:

Включение Live Server, если нет.html или.htm файлов:

Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server

2. Sass

Поддержка синтаксиса Sass: отступы, автозаполнение и прочее

Компилирует SASS / SCSS файлы в CSS в режиме реального времени

Для включения нужно нажать Watch Sass в статус баре

Что включает в себя Live Sass Complier:

1. выбор папки экспорта компилируемого файла
2. выбор стиля CSS (расширенный, компактный, сжатый, вложенный)
3. выбор имени расширения (.css или.min.css)
4. совместимость с расширением Live Server
5. настройка автоматической простановки вендорных префиксов
6. и прочее

Выделение тегов - открывающего и закрывающего

Подсветку выделения тегов можно кастомизировать под себя. Моя настройка:

"highlight-matching-tag.leftStyle" : { "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" } , "highlight-matching-tag.rightStyle" : { "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" } ,

Выделение web-цветов в редакторе соответствующим цветом

Расширение подкрашивает симметричные скобки одинаковым цветом, но отличным от других скобок.

При изменении одного парного тега, второй будет изменён автоматически.

По умолчанию расширение работает для всех языков, чтобы изменить данную настройку используйте следующий код:

"auto-rename-tag.activationOnLanguage" : [ "html" , "xml" , "php" , "javascript" ] ,

8. Auto Close Tag

Автоматическое закрытие тегов

По умолчанию работает для всех языков: HTML, PHP, JavaScript, markdown, liquid и т.д. Изменить настройки можно в setting.json

"auto-close-tag.activationOnLanguage" : [ "php" , "javascript" , "javascriptreact" , "typescript" , "typescriptreact" , "plaintext" , "markdown" , "vue" , "liquid" , ]

9. Import Cost

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

10. Material Theme

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

Тогда настройки для settings.json будут такими

"editor.fontLigatures" : true , "editor.fontFamily" : "Fira Code" , "editor.fontWeight" : "100" ,

11. Apache Conf

Поддержка синтаксиса Apache. Удобно для редактирования файлов с расширениями .htaccess . Также поддерживает типы файлов: .conf, .htgroups, .htpasswd

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 применяет шаблон регулярного выражения к любому открытому текстовому файлу, выделяя все совпадения. Прямо как

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

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

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

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

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

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

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

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

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

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

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

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

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

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