Редактирование кода с помощью Visual Studio Code for the Web (предварительная версия)

[Данный раздел посвящен предварительному выпуску и может быть изменен.]

Из студии дизайна вы можете редактировать код сайта с помощью Visual Studio Code for the Web. Эта функция позволяет редактировать статическое содержимое, код HTML, CSS,Liquid и JavaScript для следующих метаданных веб-сайта:

Метаданные	Контент
Расширенные формы (многошаговые формы)	JavaScript
Базовые формы	JavaScript
Фрагменты содержимого	Все поддерживаемые фрагменты содержимого
Списки	JavaScript
Веб-файлы	Просмотр и загрузка медиафайлов. Редактирование текстовых файлов (файлов кода).
Веб-страницы	Все поддерживаемое содержимое (для каждого языка), JavaScript и CSS
Веб-шаблоны	Все поддерживаемое содержимое

Заметка

Вы не сможете создавать записи метаданных, добавлять и изменять только содержимое, код и просмотр и скачивание вложений файлов.

Visual Studio Code for the Web предоставляет бесплатную, не требующую установки функциональность Microsoft Visual Studio Code, которая работает полностью в вашем браузере, что позволяет быстро и безопасно просматривать код сайта и вносить небольшие изменения в код. Дополнительная информация: Функциональность Visual Studio Code for the Web.

Важно

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

Заметка

• При первом использовании загрузка Visual Studio Code for Web может занять некоторое время, так как устанавливаются необходимые для этой функции расширения.
• Операции создания, удаления и переименования файлов не поддерживаются.
• Эта функция использует веб-расширение Power Platform Tools . Веб-расширения ограничены песочницей браузера и поэтому имеют ограничения по сравнению с обычными расширениями.
  • Интерфейс командной строки Power Platform не поддерживается.
  • Функции веб-расширения Power Platform Tools ограничены функциональностью редактирования кода Power Pages.
  • Эта функция недоступна в облаке сообщества государственных организаций (GCC), облаке сообщества государственных организаций (GCC High) и Министерстве обороны (DoD). Пользователи в этих регионах будут использовать приложение Управление порталами для редактирования кода. Дополнительную информацию см. в разделе Редактирование кода в приложении "Управление порталами".

Редактирование кода доступно в дизайн-студии

Вы можете начать редактирование кода своего сайта с помощью Visual Studio Code for the Web на главной странице Power Pages, выбрав пункт Редактировать код сайта в раскрывающемся меню Правка.

Вы также можете отредактировать код в студии дизайна из следующих областей:

• Редактирование кода веб-страницы из рабочей области "Страницы"
• Код шаблона заголовка из рабочей области "Страницы"
• Редактирование пользовательского кода CSS из рабочей области "Настройка стиля"
• Редактировать пользовательский код JavaScript для многошаговых форм
• Редактировать пользовательский код JavaScript для базовых форм
• Редактирование пользовательского кода JavaScript для списков
• Редактирование фрагментов содержимого
• Изменение веб-шаблонов
• Просмотр и загрузка веб-медиафайлов (изображений)
• Изменение текстовых веб-файлов (CSS, JavaScript, других)

Давайте посмотрим, как редактировать код, используя эти области.

Редактирование кода веб-страницы из рабочей области страниц

Когда вы открываете студию дизайна Power Pages, вы видите пункт Редактировать код в меню "Страницы"¹ и правом верхнем углу экрана².

Код шаблона заголовка из рабочей области страниц

Выберите Редактировать заголовок сайта, затем выберите Редактировать код, чтобы открыть редактор кода.

Редактирование пользовательского кода CSS из рабочей области "Настройка стиля"

Перейдите в рабочую область "Настройка стиля" и выберите пункт меню Редактировать код, доступный для пользовательского кода CSS, чтобы открыть редактор кода.

Представление "Действия Power Pages"

Представление Действия Power Pages, доступное в нижней части проводника, позволяет управлять сайтами Power Pages непосредственно в редакторе. Это сокращает необходимость переключения на Power Pages Studio, позволяя разработчикам быстро выполнять распространенные задачи из редактора.

Доступные действия

• Предварительный просмотр сайта
  Это действие очищает кэш конфигурации и открывает сайт в VS Code. Это позволяет разработчикам просматривать и тестировать изменения кода сайта без необходимости переключения контекста в Power Pages Studio.

• Откройте в Power Pages Studio
  После внесения изменений в код используйте это действие для перехода в Power Pages Studio. Это полезно для настройки поставщиков проверки подлинности, веб-ролей и других параметров сайта, которые не редактируются в редакторе кода.

• Открытие в VS Code Desktop
  Если установлен рабочий стол VS Code, это действие открывает сайт в классическом приложении. Он также активирует скачивание сайта, гарантируя, что код доступен локально и готов к редактированию.

Уведомление о конфликте слияния

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

Сравнение кода покажет текущий код рядом с вашим кодом и позволит вам вернуться к существующим изменениям, принять каждое изменение по отдельности или использовать свои изменения и перезаписать существующее содержимое.

Вы сможете просмотреть последнее содержимое и либо объединить, либо перезаписать код, либо отменить изменения.

Учебник. Редактирование кода сайта с помощью Visual Studio Code for the Web

В этом учебнике шаг за шагом демонстрируется редактирование кода сайта с использованием Visual Studio Code for Web.

Шаг 1. Редактирование кода сайта с помощью Visual Studio Code for the Web

1. Откройте свой сайт в студии дизайна Power Pages

2. В правом верхнем углу нажмите кнопку "Изменить код"

   

3. Выберите Открыть Visual Studio Code в диалоговом окне подтверждения.

4. Войдите в Visual Studio Code, используя учетные данные своей среды.

5. Дождитесь инициализации веб-расширения Power Platform Tools и загрузки кода веб-страницы на левой панели.

Шаг 2. Обновление содержимого и кода

1. Проводник в левой части экрана загружает соответствующие метаданные конфигурации веб-сайта, которые можно редактировать с помощью Visual Code для Интернета.

   

2. Внесите изменения в соответствующие файлы метаданных и нажмите Ctrl+S, чтобы сохранить изменения.

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

   

4. Выберите Предварительный просмотр, чтобы увидеть изменения на сайте Power Pages.

Использование Visual Studio Code for the Web или Visual Studio Code Desktop

Пользователи могут редактировать, отлаживать и просматривать изменения в коде страниц с помощью веб-версии Visual Studio Code for the Web, не прибегая к каким-либо внешним инструментам. Visual Studio Code Desktop предоставляет другие расширенные функции для редактирования всех метаданных сайта и интеграции с GitHub, фреймворками и процессами непрерывной интеграции/непрерывной разработки (CI/CD).

Функция	VS Code в Интернете	VS Code Desktop
Создание новых записей метаданных конфигурации веб-сайта	нет	Ограничено веб-страницами, шаблонами страниц, веб-шаблонами, фрагментами содержимого и веб-файлами.
Прямое редактирование сайта	Да	нет
Редактирование метаданных сайта	Ограничено редактированием веб-страниц, фрагментов содержимого, базовых форм, многошаговых форм, списков и веб-шаблонов.	Вся конфигурация метаданных Power Pages
Предварительный просмотр сайта	Плановое	Плановое
Поддержка интерфейса командной строки Power Platform	нет	Да
Расширенный рабочий процесс, привязанный к ЦП и хранилищу. Поддержка ReactJS или другого средства сборки платформы	нет	Да
Интеграция с GitHub с такими возможностями, как возврат кода, получение кода, управление конфликтами и слияние.	нет	Да

Редактирование кода в приложении "Управление порталами"

Заметка

• Использование Visual Studio Code for the Web для редактирования веб-сайтов не поддерживается в облаке сообщества для государственных организаций (GCC), облаке сообщества для государственных организаций (GCC High) и в регионе Министерства обороны США (DoD). Пользователи в этих регионах могут использовать приложение Управление порталами для внесения необходимых изменений.

Если регион не поддерживает Visual Studio Code for the Web, при выборе значка редактора кода </> на панели команд откроется приложение "Управление порталами".

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

Тип	Местоположение кода
Веб-страница	Выберите запись веб-страницы. Выберите запись содержимого веб-страницы в разделе Локализованное содержимое. Текст страницы можно редактировать в поле Текст (HTML) на вкладке Общие. Пользовательский код JavaScript и Пользовательский код CSS можно редактировать на вкладке Дополнительно.
Базовая форма	Выберите запись базовой формы. Измените настраиваемый JavaScript на вкладке "Дополнительные параметры".
Многошаговая форма	Выберите многоэтапную запись формы. На вкладке "Шаги формы " выберите шаг формы с несколькими шагами. Измените настраиваемый JavaScript на вкладке "Параметры формы ".
Список (List)	Выберите запись списка. Изменение пользовательского JavaScript на вкладке "Параметры".
Веб-шаблон	Выберите запись веб-шаблона. Измените источник на вкладке "Общие ".

Сохраните запись и просмотрите свой веб-сайт, чтобы протестировать отредактированный код.

См. также

• Использование Visual Studio Code и Microsoft Power Platform CLI