Сопоставление тем Visual Studio в расширениях Visual Studio
Область применения:Visual Studio Visual Studio для Mac 
Visual Studio Code
При создании пользовательского пользовательского интерфейса с помощью WPF необходимо убедиться, что он соответствует темям Visual Studio. Таким образом пользовательский интерфейс будет выглядеть в собственном коде и чувствовать себя более естественной частью Visual Studio. Если нет, окна инструментов и диалоговые окна могут в конечном итоге выглядеть следующим образом в теме Light:
Обратите внимание, как заполнение вокруг текстовых полей и кнопок не выглядит правильно? Это становится еще хуже в темной теме:
Теперь текст и цвет фона делают почти невозможным для чтения. Нехорошо.
Существует простой способ убедиться, что фоновые цвета пользовательского интерфейса, стилизация кнопок и т. д. совпадают с простым трюком Visual Studio. Таким образом, тот же пользовательский интерфейс может выглядеть следующим образом в теме Light:
Или в темной теме:
Это выглядит гораздо лучше. Давайте рассмотрим, как мы можем тему нашего пользовательского интерфейса.
WPF UserControl
Ниже приведен пример WPF , который можно использовать непосредственно в окне инструмента.
Обратите внимание на импортированное xmlns:toolkit пространство имен и toolkit:Themes.UseVsTheme=»True» атрибут. Они автоматически применяют официальный стили для элементов управления WPF, которые visual Studio использует сам. Мы не должны делать ничего другого, чтобы получить стили, примененные ко всему . Легко!
Добавлено преимущество заключается в том, что если пользователь изменяет цветовую тему, например свет на темный, то наш пользовательский интерфейс будет переключаться сразу же без необходимости перезагрузить.
Элемент управления DialogWindow
Visual Studio поставляется с элементом управления, который можно использовать для пользовательских окон, которые являются элементом DialogWindow управления. Рекомендуется использовать его для любых диалоговых окон, но его также можно использовать в окнах инструментов.
Это очень похоже на другие типы окон XAML.
Обратите внимание, что импортированные пространства имен для набора средств и платформы и атрибута toolkit:Themes.UseVsTheme=»True» .
Больше ничего не требуется. Диалоговое окно теперь использует цвета и стили Visual Studio.
Получение исходного кода
Исходный код этого расширения можно найти в тестовом проекте сообщества набор средств.
Дополнительные ресурсы
Дополнительные сведения о цветах Visual Studio из этих ресурсов.
- Цвета и стили для Visual Studio
- Общие цвета для Visual Studio
- Справочник по значению цвета
Создание шаблонов элементов
Область применения:
Visual Studio Visual Studio для Mac Visual Studio Code
В этой статье показано, как создать шаблон элемента с помощью мастера экспорта шаблонов. Если шаблон будет состоять из нескольких файлов, см. статью Практическое руководство. Создание многофайловых шаблонов элементов.
Добавление шаблона элемента в диалоговое окно «Добавление нового элемента»
- Создайте или откройте проект в Visual Studio.
- Добавьте элемент в проект и измените его по своему усмотрению.
- Отредактируйте файл кода, чтобы указать, где должна быть выполнена замена параметра. Дополнительные сведения см. в разделе Практическое руководство. Замена параметров в шаблоне.
- В меню Проект выберите команду Экспорт шаблона.
- На странице Выбор типа шаблона выберите Шаблон элемента, затем проект, который содержит элемент, и нажмите кнопку Далее.
- На странице Выбор элемента для экспорта выберите элемент, для которого нужно создать шаблон, а затем нажмите кнопку Далее.
- На странице Выбор ссылок для элементов выберите ссылки на сборки, включаемые в шаблон, а затем нажмите кнопку Далее.
- На странице Выбор параметров шаблона введите имя шаблона и необязательное описание, значок и рисунок предварительного просмотра, а затем нажмите кнопку Готово. Файлы для шаблона добавляются в ZIP-файл и копируются в каталог, который вы указали в мастере. Расположением по умолчанию является папка %USERPROFILE%\Documents\Visual Studio \My Exported Templates.
- Если вы не выбрали параметр Автоматически импортировать шаблон в Visual Studio в мастере экспорта шаблонов, найдите экспортированный шаблон. Затем скопируйте его в каталог пользовательских шаблонов элементов. Расположением по умолчанию является папка %USERPROFILE%\Documents\Visual Studio \Templates\ItemTemplates.
- Закройте Visual Studio, а затем откройте среду повторно.
- Создайте новый проект или откройте существующий, а затем выберите Проект>Добавить новый элемент или нажмите клавиши CTRL+SHIFT+A. Шаблон элемента появится в диалоговом окне Добавление нового элемента. Если вы добавили описание в мастере экспорта шаблонов, оно будет отображаться в правой части диалогового окна.
Включение шаблона элемента для использования в проекте универсального приложения для Windows
Мастер выполняет за вас основную часть работы по созданию базового шаблона, но во многих случаях необходимо вручную изменить VSTEMPLATE-файл после экспорта шаблона. Например, если элемент должен отображаться в диалоговом окне Добавление нового элемента для проекта универсального приложения Windows, необходимо выполнить ряд дополнительных действий.
- Выполните шаги из предыдущего раздела по экспорту шаблона элемента.
- Извлеките созданный ZIP-файл и откройте VSTEMPLATE-файл в Visual Studio.
- Для проекта универсальной платформы Windows на C# добавьте следующий XML-код внутри элемента:
Microsoft.CSharp.Class Теперь можно добавить основанный на этом шаблоне элемент в проект универсальной платформы Windows из диалогового окна Добавление нового элемента.
Включение шаблонов для конкретных подтипов проектов
Можно указать, что шаблон должен отображаться только для определенных подтипов проекта, например Windows, Office, базы данных или веб-сайта.
- Найдите в VSTEMPLATE-файле элемент ProjectType для шаблона элемента.
- Добавьте элемент ProjectSubType сразу после элемента ProjectType .
- Задайте для элемента одно из следующих текстовых значений:
- Windows
- Office
- База данных
- Сеть
В следующем примере показан шаблон элемента, доступный для проектов Office.
Class An empty class file Class.ico CSharp Office Class.cs Class1.cs Создание шаблона элемента вручную
В некоторых случаях может потребоваться вручную создать шаблон элемента с нуля.
- Создайте проект и его элемент.
- Измените элемент проекта, пока он не будет готов к сохранению в качестве шаблона.
- Отредактируйте файл кода, чтобы указать, где должна быть выполнена замена параметра. Дополнительные сведения о замене параметров см. в статье Практическое руководство. Замена параметров в шаблоне.
- Создайте XML-файл и сохраните его, используя расширение VSTEMPLATE, в одном каталоге с файлом элемента проекта.
- Измените VSTEMPLATE-файл с кодом XML для предоставления метаданных шаблона элемента. Дополнительные сведения см. в статье Справочник по схемам шаблонов (расширяемость) и в примере из предыдущего раздела.
- Сохраните VSTEMPLATE-файл и закройте его.
- В проводнике выберите файлы, которые нужно включить в шаблон. Щелкните выбранные файлы правой кнопкой мыши и выберите пункты Отправить>Сжатая ZIP-папка. Выбранные файлы будут сжаты в ZIP-файл.
- Скопируйте ZIP-файл и вставьте его в расположение, где находится пользовательский шаблон элемента. Каталог по умолчанию — %USERPROFILE%\Documents\Visual Studio 2022\Templates\ItemTemplates. Дополнительные сведения см. в статье Практическое руководство. Размещение и упорядочение шаблонов проектов и элементов.
См. также
- Создание шаблонов проектов и элементов
- Практическое руководство. Создание многофайловых шаблонов элементов
- Справочник по схемам шаблонов Visual Studio (расширяемость)
Создание пользовательского интерфейса с помощью конструктора XAML
Область применения:Visual Studio Visual Studio для Mac Visual Studio Code
Конструктор XAML в Visual Studio и Blend для Visual Studio предоставляет визуальный интерфейс для разработки приложений на основе XAML, таких как WPF и UWP. Вы можете создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления из окна «Панель элементов» (окно «Ресурсы» в Blend для Visual Studio) и задавая свойства в окне «Свойства». Также можно изменить код XAML непосредственно в представлении XAML.
Для опытных пользователей предоставляется даже возможность настроить Конструктор XAML.
Xamarin.Forms не поддерживает конструктор XAML. Чтобы просмотреть пользовательские интерфейсы XAML Xamarin.Forms и изменить их во время работы приложения, используйте xaml Горячая перезагрузка для Xamarin.Forms. Дополнительные сведения см. на странице xaml Горячая перезагрузка для Xamarin.Forms (предварительная версия).
Конструктор XAML WinUI 3 / .NET MAUI не поддерживается в Visual Studio 2022. Чтобы просмотреть пользовательские интерфейсы XAML WinUI 3/ .NET MAUI XAML и изменить их во время работы приложения, используйте XAML Горячая перезагрузка для WinUI 3/.NET MAUI. Дополнительные сведения см. на странице Горячая перезагрузка XAML.
Рабочая область конструктора XAML
Рабочая область конструктора XAML состоит из нескольких элементов визуального интерфейса. К ним относятся область рисования (визуальная область конструктора), редактор XAML, окно «Структура документа» (окно «Объекты и временная шкала» в Blend для Visual Studio) и окно «Свойства». Чтобы открыть конструктор XAML, щелкните правой кнопкой мыши XAML-файл в обозревателе решений и выберите Конструктор представлений.
В конструкторе XAML реализовано представление XAML и синхронизированное представление конструктора для отображения XAML-разметки приложения. Открыв XAML-файл в Visual Studio или в Blend для Visual Studio, можно переключаться между представлением конструктора и представлением XAML с помощью вкладок Конструктор и XAML. Вы можете использовать кнопку «Переключить области» для переключения окна, которое отображается сверху: панель инструментов или редактор XAML.
Представление конструирования
В режиме конструктора окно, содержащее область рисования, является активным окном, которое можно использовать в качестве основной рабочей области. С его помощью можно визуально создавать страницы приложения, добавляя, рисуя или изменяя элементы. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML. На этом рисунке показана область рисования в режиме конструктора.
В области рисования доступны следующие функции.
Линии привязки
Линии привязки — это границы выравнивания, отображаемые в виде красных пунктирных линий, когда края элементов управления или базовые линии текста выравниваются. Границы выравнивания появляются, только если привязка к линиям привязки включена.
Границы сетки
Границы сетки служат для управления строками и столбцами на панели Сетка. Вы можете создавать и удалять строки и столбцы, а также изменять их относительную ширину и высоту. Вертикальная граница сетки, которая отображается в левой части области рисования, используется для строк, а горизонтальная линия, которая появляется вверху, — для столбцов.
Графические элементы сетки
Графический элемент сетки отображается как треугольник с вертикальной или горизонтальной линией, присоединенной к границе сетки. При перетаскивании графического элемента сетки ширина или высота смежных столбцов или строк изменяется по мере движения мыши.
Графические элементы сетки используются для управления шириной и высотой строк и столбцов сетки. Вы можете добавить новый столбец или строку, щелкнув границу сетки. При добавлении новой строки или столбца для панели сетки, которая содержит два и более столбцов или строк, за пределами границы появляется мини-панель инструментов, позволяющая задать ширину и высоту явным образом. С помощью мини-панели инструментов можно задавать размеры строк и столбцов сетки.
Маркеры изменения размера
Маркеры изменения размера появляются на выбранных элементах управления и позволяют изменить их размер. При изменении размера элемента управления обычно отображаются значения ширины и высоты. Дополнительные сведения о работе с элементами управления в представлении Конструктор см. в статье Работа с элементами в Конструкторе XAML.
Поля
Поля представляют собой фиксированное пространство между краем элемента управления и краем его контейнера. Вы можете задать поля элемента управления с помощью свойств Margin в разделе Макет окна Свойства.
Графические элементы полей
Графические элементы полей можно использовать для изменения полей элемента относительно его контейнера макета. Если графический элемент поля открыт, поле не задано, а его графический значок отображается как разорванная цепь. Если поле не задано, элементы остаются на месте при изменении размеров контейнера макета во время выполнения. Если графический элемент поля закрыт, отображается значок целой цепи, а элементы перемещаются вместе с полем при изменении размеров контейнера макета во время выполнения (поля остаются фиксированными).
Маркеры элемента
Вы можете изменить элемент с помощью его маркеров, которые появляются в области рисования при наведении указателя мыши на углы синего ограничивающего прямоугольника. Эти маркеры позволяют выполнить поворот, изменение размера или зеркальное отражение, перемещение или добавление радиуса скругления угла к элементу. Символ маркера элемента зависит от функции и меняется в зависимости от расположения указателя. Если вы не видите маркеры элемента, убедитесь, что элемент выделен.
В представлении Конструктор в левой нижней части окна доступны дополнительные команды области рисования, как показано ниже:
На этой панели инструментов доступны следующие команды:
Масштабирование
Команда «Масштаб» позволяет указать размер области конструктора. Вы можете выбрать масштаб от 12,5 % до 800 % или выбрать параметры, такие как Вписать выделенное и Вписать все.
Показать/скрыть сетку привязки
Показывает или скрывает сетку привязки, которая отображает линии сетки. Линии сетки используются при включении привязки к линиям сетки или привязки к линиям привязки.
Включить/выключить привязку к линиям сетки
Если привязка к линиям сетки включена, элемент, как правило, выравнивается с ближайшими горизонтальными и вертикальными линиями сетки при перетаскивании его в области.
Переключить фон области рисования
Выполняет переключение между светлым и темным фоном.
Включить/выключить привязку к линиям привязки
Линии привязки помогают выравнивать элементы управления относительно друг друга. Если привязка к линиям привязки включена, при перетаскивании элемента управления относительно других элементов появляются границы выравнивания, когда края и текст некоторых элементов управления выровнены по горизонтали или вертикали. Граница выравнивания отображается в виде красной пунктирной линии.
Отключить код проекта
Отключает код проекта, например пользовательские элементы управления и преобразователи величин, и выполняет перезагрузку конструктора.
Представление XAML
В представлении XAML окно, содержащее редактор XAML, активно, а редактор XAML служит основным средством разработки. Язык XAML предоставляет декларативный, основанный на XML словарь для создания пользовательского интерфейса приложения. Представление XAML поддерживает IntelliSense, автоматическое форматирование, выделение синтаксиса и перемещение по тегам. На следующем рисунке показано представление XAML с открытым меню IntelliSense:
Окно Структура документа
Окно «Структура документа» в Visual Studio аналогично окну Объекты и временная шкала в Blend для Visual Studio. Структура документа помогает выполнять следующие задачи:
- Просматривать иерархическую структуру всех объектов в области рисования.
- Выберите элементы, чтобы их можно было изменить. Например, их можно перемещать в иерархии или задавать их свойства в окно свойств. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML.
- Создавать и изменять шаблоны для элементов управления.
- Создавать анимации (только Blend для Visual Studio).
Чтобы открыть окно «Структура документа» в Visual Studio, в строке меню выберите Вид>Другие окна>Структура документа. Чтобы открыть окно «Объекты и временная шкала» в Blend для Visual Studio, в строке меню выберите Вид>Структура документа.
В основном представлении окна «Структура документа» или «Объекты и временная шкала» отображается иерархия документа в виде древовидной структуры. Иерархическую структуру документа можно использовать для просмотра документа на различных уровнях детализации, а также для блокировки и скрытия элементов по отдельности или в группе. Следующие параметры доступны в окне «Структура документа»/ «Объекты» и «Временная шкала».
Показать или скрыть
Отображает или скрывает элементы области рисования. При отображении выглядит как символ глаза. Чтобы скрыть элемент, можно также нажать CTRL+H, а чтобы показать его — SHIFT+CTRL+H.
Заблокировать или разблокировать
Блокирует или разблокирует элементы области рисования. Заблокированные элементы невозможно изменить. При отображении выглядит как символ замка в режиме блокировки. Чтобы заблокировать элемент, можно также нажать CTRL+L, а чтобы разблокировать его — SHIFT+CTRL+L.
Вернуть для области значение pageRoot
Параметр в верхней части окна «Структура документа» или «Объекты и временная шкала» со значком стрелки вверх выполняет перемещение в предыдущую область. Перемещение к более высокой области доступно только при изменении стиля или шаблона.
Окно Свойства»
Окно Свойства позволяет задавать значения свойств для элементов управления. Он выглядит следующим образом.
В верхней части окна Свойства представлены различные параметры.
- Измените имя выбранного элемента в поле Имя.
- В левом верхнем углу есть значок, представляющий текущий выбранный элемент.
- Чтобы упорядочить свойства по категориям или в алфавитном порядке, нажмите кнопку Категория, Имяили Источник в списке Упорядочить по .
- Чтобы просмотреть список событий для элемента управления, нажмите кнопку События, на которой отображается символ молнии.
- Чтобы найти свойство, начните вводить его имя в поле поиска. В окне Свойства по мере ввода отображаются свойства, соответствующие условиям поиска.
Некоторые свойства позволяют задать дополнительные свойства, для этого нужно нажать кнопку со стрелкой вниз.
Справа от значения каждого свойства отображается метка свойства в виде квадрата. Внешний вид метки свойства указывает, применены ли к свойству привязка данных или ресурс. Например, белый квадрат указывает значение по умолчанию, черный квадрат обычно указывает, что был применен локальный ресурс, а оранжевый квадрат обычно указывает, что была применена привязка данных. Щелкнув метку свойства, можно перейти к определению стиля, открыть построитель привязки данных или открыть средство выбора ресурсов.
Дополнительные сведения об использовании свойств и обработке событий см. в статье Введение в работу с элементами управления и шаблонами.
См. также
- Работа с элементами в конструкторе XAML
- Практическое руководство. Создание и применение ресурса
- Пошаговое руководство. Привязка к данным в конструкторе XAML
Как настроить оформление Visual Studio Code
В Visual Studio Code (VSCode) темы оформления можно настроить несколькими способами. Самый простой — это установить уже готовый вариант. Поскольку выбор, действительно, очень большой, то можно подобрать наиболее привлекательный вариант. Второй способ — это воспользоваться он-лайн редактором тем, где можно самостоятельно настроить все цвета. И третий вариант — это используя уже готовую тему, внести необходимые коррективы в локальные настройки.
Прежде, чем рассмотреть все эти варианты, я отмечу, что VSCode может хранить настройки не только глобально для всего редактора, но и локально: для выбранной папки или для рабочей области. Однажды я установил какое-то расширение, которое поменяло цвет оформления на болотно-грязный, и потом полдня потратил на то, как его отключить. Оказалось, что цвет прописался в конфигурации папки. 🙂
Готовые темы для Visual Studio Code
Здесь всё очень просто: все темы устанавливаются с официального сайта: Marketplace. На странице темы есть ссылка Install , нажав на которую, откроется сам VSCode, где и выбирается установка.
Для переключения установленных тем используются горячие клавиши Ctrl+K+T (нажать Ctrl, потом не отпуская, «K» и «T»). Дальше курсором выбираем любой вариант.
В Marketplace не очень удобно сделан предпросмотр тем, поэтому можно выбрать тему с других сайтов, например:
- orta.io/vscode-themes — здесь большие скриншоты всех тем на одной странице.
- vscodethemes.com — здесь темы уже сгруппированы на светлые и тёмные, а также доступен предпросмотр для HTML/JS/CSS-кода.
Создание своей темы для VSCode
При желании можно создать и свою тему. Для этого нужно воспользоваться он-лайн редактором TmTheme Editor. Вначале лучше выбрать из галереи какой-то подходящий вариант, после его отредактировать. После того, как настройки выполнены, нужно скачать файл (кнопка Download ). Это будет файл с расширением .tmTheme . После этого нужно создать расширение для этой темы. Идём в каталог c:\Users\ЮЗЕР\.vscode\extensions\ , где VSCode хранит все установленные расширения. Делаем там каталог «my.themу», в который размещаем файл package.json такого содержания:
< "name": "My theme", "version": "1.0.0", "engines": < "vscode": ">=0.9.0-pre.1" >, "publisher": "MAX", "contributes": < "themes": [ < "label": "MyTheme", "uiTheme": "vs", "path": "./themes/my.tmTheme" >] > >
Название, версию можно поменять на свою. Параметр path указывает на tmTheme-файл. Его мы скачали с TmTheme Editor — нужно его переименовать в my.tmTheme . Делаем подкаталог themes и кидаем в него этот файл. Параметр uiTheme указывает на базовый UI — в данном примере «vs» означает светлую тему. Если вы используется темную, то нужно указать «vs-dark». После этого в Visual Studio Code переключаемся на вкладку расширений и включаем его. Если вы решите изменить какой-то цвет в TmTheme Editor, то скачиваете новый файл и заменяете им my.tmTheme . Чтобы изменения вступили в силу, можно выключить расширение и опять его включить.
Свои настройки оформления Visual Studio Code
Лично я предпочитаю светлые темы оформления, хотя тёмные выглядят красивей, поскольку цвет на темном фоне лучше различим. Для меня проблема в том, что приходится постоянно переключаться с редактора на сайт в браузере и мельтешение «тёмное-светлое» довольно сильно раздражает. Поэтому, чтобы не насиловать глаза, я использую светлое оформление. У готовых светлых тем существенный недостаток — низкий контраст цветов на белом фоне. Из-за этого подобрать нормальный цвет не такое простое занятие. Например многие используют светло-серый цвет текста: выгладит красиво, но для зрения получается слишком малый контраст. Другие, наоборот, ставят насыщенные цвета: синий, красный — для нас они несут ещё и смысловой оттенок, поэтому их нужно подбирать с умом. В общем, если вы такой же капризный как я, 🙂 то самым лучшим способом будет собственная настройка оформления VSCode. И делается это, на самом деле, достаточно просто.
Общий принцип
Все настройки хранятся как обычно в settings.json . Visual Studio Code разделяет оформление самого редактора от цветовой схемы подсветки кода. Сам редактор настраивается в очень широких пределах — изменить можно буквально каждый элемент дизайна. В settings.json нужно сделать секцию workbench.colorCustomizations , в которой указываются изменяемые параметры. Это «глобальное оформление», которое перекроет оформление любой темы.
Перед тем, как вы начнёте вносить изменения, я бы посоветовал выбрать наиболее подходящую тему и уже после этого вносить свои изменения.
Оформление самого редактора
Я использую стандартную тему оформления Visual Studio Light и секция workbench.colorCustomizations у меня такая:
. "workbench.colorCustomizations": < "foreground": "#000000", "editor.lineHighlightBackground": "#F0F05D70" >, .
Параметр foreground задаёт базовый черный цвет текста. Второй параметр задает полупрозрачный желтый цвет для подсветки текущей линии. Параметров очень много: все они описаны в официальной документации Theme Color. После сохранения settings.json изменения сразу же вступают в силу.
«Подводные камни»
Некоторые расширения могут перекрывать ваши настройки. Я столкнулся с тем, что например расширение Git (сейчас это стандартное расширение, доступное в общих настройках), изменяет цвет списка файлов. То есть я указываю цвет #000000, но он принудительно меняет их на малоконтрастный серый. В данном случае Git нашёл существующий репозиторий и решил, что изменения не заcommit’чены. Настройки оформления для Git’а другие (они есть в документации). Поэтому, если какой-то параметр вдруг не работает, то возможно его перебивает какое-то расширение. Если расширение не нужно, то его можно просто отключить (enable).
Подсветка кода в VSCode
Теперь самое интересное. Для изменения подсветки кода, используется секция editor.tokenColorCustomizations . В ней указывается тема оформления, для которой нужно внести изменения. То есть настройки применятся только, если будет выбрана эта тема. Покажу на примере:
. "editor.tokenColorCustomizations": < "[Visual Studio Light]": < "textMateRules": [ < "scope": "entity.name.function.php", "settings": < "foreground": "#000000", "fontStyle": "italic underline" >>, < "scope": "variable.other.php", "settings": < "foreground": "#0000BB", >>, ], >, >, .
Здесь выбрана тема «Visual Studio Light». Секция textMateRules как раз и содержит оформление для каждого элемента, который задаётся в параметре scope . Само же оформление задается в параметре settings . Если оформление для разных элементов одно и тоже, то в scope можно их перечислить через запятую, например так (здесь два элемента):
Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию. Для начала загрузите любой файл, например PHP (как в моих примерах). После этого нажмите F1 (открется панель команд) и в неё наберите Developer: Inspect TM Scopes и после нажмите Enter . 
После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента. 
Здесь указывается текущее оформление. Строчка:
entity.name.function.php
показывает какой именно элемент сейчас работает. А ниже приведена иерархия элементов:
entity.name.function.php meta.function-call.php source.php meta.embedded.block.php text.html.php
Верхние элементы имеют более высокий приоритет. В данном примере сработал entity.name.function.php, но в коде могут встречаться и другие, например source.php. Если нужно изменить элемент, достаточно скопировать его из этой информации и вставить в settings.json . После сохранения файла, изменения будут сразу же видны в коде.
Подсказка. Удобно разделить окна редактора VSCode, чтобы в одном был исходный php-код, а в другом settings.json .