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

  • Статья

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

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

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

Заметка

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

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

Внимание

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

Демонстрация использования веб-версии Visual Studio Code для редактирования сайта Power Pages.

Заметка

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

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

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

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

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

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

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

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

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

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

Редактирование кода из заголовка страниц.

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

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

Изменение кода из пользовательской таблицы CSS.

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

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

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

Выполните слияние конфликтов в коде.

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

Учебное пособие: редактирование кода сайта с помощью веб-версии Visual Studio Code

В этом руководстве вы пошагово отредактируете код сайта с помощью Visual Studio Code для Интернета.

Шаг 1. Изменение кода сайта с помощью Visual Studio Code для интернета

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

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

    Открытие в Visual Studio Code из студии дизайна.

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

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

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

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

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

    Меню проводника для рабочей области без названия, показывающее веб-файлы.

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

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

    Интерфейс, позволяющий пользователю выбрать кнопку «Синхронизировать», чтобы синхронизировать изменения, сделанные в Visual Studio Code, со студией дизайна.

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

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

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

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

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

Заметка

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

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

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

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

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

См. также