Visual studio code расширения для php. Лучшие плагины для VS Code


Давайте поговорим о 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, получать ценные сведения с помощью команд сравнения и многое другое. Нажав на строку кода, вы увидите, кто его редактировал, когда его редактировали и в каком коммите.

Текстовые редакторы, созданные на основе 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 (сокращённо 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).

Рассмотрим лучшие плагины редактора 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


2024 © gtavrl.ru.