Использование расширения Visual Studio Code

Visual Studio Code — это упрощенный, мощный редактор исходного кода для Windows, macOS и Linux. Он поддерживает JavaScript, TypeScript и Node.js и имеет богатую экосистему расширений для других языков, таких как C++, C#, Java, Python, PHP и Go, а также среды выполнения, такие как .NET и Unity. Узнайте больше о Visual Studio Code в разделе Начало работы с VS Code.

Visual Studio Code позволяет расширить возможности с помощью extensions. Visual Studio Code расширения могут добавлять дополнительные функции в общий интерфейс. С выпуском этой возможности вы теперь можете использовать расширение Visual Studio Code для работы с Power Pages.

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

Power Platform Tools добавляет возможность настраивать веб-сайты с помощью Visual Studio Code, а также использовать встроенную функциональность IntelliSense языка Liquid для упрощения завершения кода, помощи и подсказок при настройке интерфейса веб-сайтов с помощью Visual Studio Code. С помощью расширения Visual Studio Code можно также настроить порталы с помощью интерфейса командной строки Microsoft Power Platform.

Примечание

Необходимо убедиться, что node.js загружается и устанавливается на той же рабочей станции, что и Visual Studio Code для работы функций Power Pages.
Убедитесь, что установлен только подключаемый модуль Power Platform Tools, а не Power Platform Tools и Power Platform Tools [ПРЕДВАРИТЕЛЬНАЯ ВЕРСИЯ]. Дополнительные сведения см. в известных проблемах.

Анимация, иллюстрирующая, как установить и настроить Power Platform Tools.

Предварительные условия

Прежде чем использовать расширение Visual Studio Code для Power Pages, необходимо:

Скачайте, установите и настройте Visual Studio Code. Дополнительные сведения: Download Visual Studio Code
Настройте среду и систему для поддержки CI/CD Power Pages с помощью CLI. Дополнительные сведения: Microsoft Power Platform CLI (предварительная версия)

Установка расширения Visual Studio Code

После установки Visual Studio Code необходимо установить расширение для инструментов Power Platform в Visual Studio Code.

Чтобы установить расширение Visual Studio Code, выполните следующие действия.

Откройте Visual Studio Code.
Выберите Расширения в левой области.
Выберите значок Параметры в правом верхнем углу области расширений.
Найдите и выберите Power Platform Tools.

Выберите Power Platform Tools.
Выберите Установить.
Убедитесь, что расширение успешно установлено, по сообщениям о состоянии.

Совет

Расширение Power Platform Tools автоматически позволяет использовать команды CLI Microsoft Power Platform из Visual Studio Code через Интегрированный терминал Visual Studio.

Действия Power Pages

Power Pages Действия упрощают управление сайтами и сокращают зависимость от команд Microsoft Power Platform CLI. Действия Power Pages доступны в панели Power Pages Actions на боковой панели обозревателя Visual Studio Code.

В этой области сайты классифицируются следующим образом:

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

Смена сред

Для переключения сред:

Нажмите кнопку Change Environment в области действий Power Pages.

Смена среды для сайтов
Выберите требуемую среду из отображаемого списка.

При выборе среды список сайтов обновляется автоматически.

Действия для сайтов

Для разных типов сайтов предусмотрены контекстно-зависимые действия, доступ к которым можно получить, щелкнув правой кнопкой мыши.

Действия для активных сайтов

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

Предварительный просмотр: очищает кэш и открывает сайт в VS Code для немедленного предварительного просмотра.
Отправить: отправка локальных изменений обратно в среду.
Загрузить: загрузка содержимого сайта в локальную папку для редактирования в автономном режиме.
Сведения о сайте: отображение подробной информации о сайте.
Открыть в проводнике: переход к локальному каталогу, содержащему код сайта.
Открыть в студии дизайна Power Pages: открытие сайта в студии дизайна Power Pages.
Запустите проверку CodeQL: выполните анализ статического кода в ФАЙЛАх HTML и JavaScript, чтобы определить уязвимости в базе кода с помощью CodeQL. Этот параметр доступен только для сайтов, скачанных локально, указанных тегом Current в списке активных сайтов.
Сравнение с локальным: открывает представление сравнения, чтобы определить различия между локальной рабочей областью и удаленной средой. Дополнительные сведения о функции сравнения конфигурации сайта см. в разделе "Дополнительные сведения о настройке сайта".

Действия для неактивных сайтов

Для неактивных сайтов предусмотрены следующие действия:

Open Site Management: открывает сайт в приложении управления Power Pages.
Сведения о сайте. Предоставляет подробные сведения о выбранном сайте, например идентификаторе веб-сайта, URL-адресе веб-сайта, версии модели данных и т. д.

Действия для других сайтов

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

Отправить сайт: отправка локального сайта в подключенную среду. После загрузки сайт появится в списке неактивных сайтов, где его можно активировать с главной страницы Power Pages.
Открыть в проводнике: переход к локальному каталогу, содержащему код сайта.

Значки файлов

Расширение Visual Studio Code для Power Pages автоматически идентифицирует и отображает значки файлов и папок внутри скачаированного содержимого веб-сайта.

Список файлов в начальном шаблоне с темой значков файлов для веб-сайта.

Visual Studio Code использует тему значков файлов по умолчанию, которая не отображает специфические для Power Pages значки. Чтобы просмотреть значки файлов, специфичные для ваших веб-сайтов, необходимо обновить экземпляр Visual Studio Code, чтобы использовать тему значков файлов, специфичную для Power Pages.

Чтобы включить тему значков файлов для порталов:

Откройте Visual Studio Code.
Перейдите в ФайлНастройкиТемаТема значков файлов.
Выберите тему Значки порталов PowerApps.

Предварительный просмотр сайта

Действие предварительного просмотра использует расширение Microsoft Edge DevTools для Visual Studio Code для предоставления предварительного просмотра сайта в редакторе. Эта функция запускает Microsoft Edge DevTools и внедренный браузер Microsoft Edge с эмуляцией устройств прямо внутри VS Code, предоставляя практически все те же возможности отладки и проверки, найденные в полной Microsoft Edge DevTools.

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

Чтобы открыть предварительный просмотр, щелкните правой кнопкой мыши активный сайт в разделе Power Pages Действия и выберите Preview. Это действие открывает внедренный Microsoft Edge браузер, указывающий на выбранный сайт.

Снимок экрана действия предварительного просмотра сайта Power Pages.

Область предварительного просмотра открывается справа.

Скриншот с отображением списка файлов, открытого файла в редакторе Visual Studio Code и предпросмотра с правой стороны.

Сравнение конфигурации сайта

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

При выборе этого действия откроется раздел Site Comparison в разделе Tools в представлении действий Power Pages. В этом разделе отображаются все файлы в вашем локальном рабочем пространстве, которые отличаются от среды, выделив:

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

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

На боковой панели проводника разверните панель Действия Power Pages.
В списке "Активные или неактивные сайты" щелкните правой кнопкой мыши нужный сайт.
Выберите "Сравнить с локальным".

Снимок экрана: сравнение с локальным параметром в списке сайтов.

Чтобы сравнить определенную папку, выполните указанные ниже действия.

На боковой панели обозревателя выберите папку (например , ) из локальной рабочей области.
Щелкните правой кнопкой мыши и выберите Power Pages>Сравнить с окружением.

Снимок экрана: опция сравнения в папке локальной рабочей области.

Управление результатами сравнения

Когда вкладка "Сравнение сайтов " активна с изменениями, щелкните правой кнопкой мыши список сравнения, чтобы получить доступ к дополнительным действиям:

Open All Diffs: открывает редактор Visual Studio Code diff для каждого файла в списке, чтобы просмотреть все изменения одновременно.
Сравнение обновлений. Повторно сканирует локальную рабочую область и удаленную среду, чтобы обновить список с последними изменениями.
Экспорт в виде HTML-отчета: создает общий HTML-документ с подробными сведениями обо всех обнаруженных различиях.
Экспорт в формате JSON: экспортирует данные сравнения в формате JSON для автоматизированных рабочих процессов или пользовательских отчетов. Вы можете поделиться экспортированным файлом с участниками группы, которые могут импортировать его в собственное представление, щелкнув правой кнопкой мыши раздел "Сравнение сайтов " и выбрав параметр "Сравнение импорта ".
Отмена всех локальных изменений: отменяет все локальные изменения, чтобы соответствовать версии в настоящее время в удаленной среде.
Удаление сравнения: закрывает текущий сеанс сравнения и очищает вкладку результатов.

Совет

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

Снимок экрана: параметры, доступные на вкладке сравнения сайтов

Автозавершение

Функция автозаполнения в расширении Visual Studio Code показывает текущий контекст в процессе редактирования, а также соответствующие элементы автодополнения с помощью IntelliSense.

Снимок экрана с примером автозавершения для идентификатора шаблона страницы.

Теги Liquid

При настройке загруженного содержимого в среде Visual Studio Code теперь можно использовать IntelliSense для тегов Liquid для Power Pages.

Начните вводить текст, чтобы увидеть список тегов Liquid. Выберите тег, чтобы правильно отформатировать его, и продолжите ввод.

Снимок экрана с фрагментом кода с примером завершения тега Liquid.

Объекты Liquid

Вы можете просмотреть завершения кода объекта Liquid, введя . Поместив курсор между скобками, выберите , чтобы отобразить список объектов Liquid, которые можно выбрать. Если у объекта больше свойств, вы можете ввести ., а затем снова выбрать , чтобы увидеть конкретные свойства объекта Liquid.

Снимок экрана, на котором показан ввод объекта Liquid.

Теги шаблонов

Вы можете просмотреть предложения веб-шаблонов Power Pages, поместив курсор в оператор {include ' '} и выбрав <CTRL> - space. Появится список существующих веб-шаблонов, из которых вы можете выбрать нужный.

Снимок экрана с тегами шаблонов.

Создание, удаление и переименование объектов веб-сайта

В Visual Studio Code вы можете создавать, удалять и переименовывать следующие компоненты веб-сайта:

Веб-страницы
Шаблоны страниц
Веб-шаблоны
Фрагменты содержимого
Новые ресурсы (веб-файлы)

Операции создания

Вы можете использовать пункты контекстного меню для создания новых компонентов веб-сайтов. Щелкните правой кнопкой мыши один из поддерживаемых объектов, выберите Power Pages и выберите нужный тип объекта веб-сайта.

Кроме того, можно использовать палитру команд Visual Studio Code, выбрав Ctrl + Shift + P.

Создание нового объекта.

Для создания объекта необходимо указать больше параметров.

Объект	Параметры
Веб-страницы	Имя, шаблон страницы, родительская страница
Шаблоны страниц	Имя, веб-шаблон
Веб-шаблоны	Имя
Фрагменты содержимого	Имя и будет ли фрагмент кодом HTML или текстом.
Новые ресурсы (веб-файлы)	Имя, родительская страница и выберите файл для отправки.

Операции переименования и удаления

В навигации по файлам можно использовать контекстное меню для переименования или удаления Power Pages компонентов.