Використання розширення Visual Studio Code
Visual Studio Code — це легкий, потужний редактор вихідного коду для Windows, macOS і Linux. Він підтримує JavaScript, TypeScript і Node.js і має багату екосистему розширень для інших мов, таких як C++, C#, Java, Python, PHP і Go, а також середовища виконання, таких як .NET і Unity. Дізнайтеся більше про Visual Studio код у статті Початок роботи з VS Code.
Visual Studio Code надає додаткові можливості завдяки розширенням. Розширення Visual Studio Code можуть вносити додаткові функції до наявного набору. Після випуску цієї функції з’явилася можливість використовувати розширення Visual Studio Code для роботи з Power Pages.
Розширення Visual Studio Code для Power Pages
Засоби Power Platform Tools дають можливість настроювати веб-сайти за допомогою Visual Studio Code, а також використовувати вбудовану мову Liquid IntelliSense, що допомагає, автоматично завершуючи код, і надає поради та підказки під час налаштування веб-сайтів у Visual Studio Code. Використовуючи розширення Visual Studio Code, ви можете також налаштувати портали за допомогою Microsoft Power Platform CLI.
Нотатка
- Вам потрібно переконатися, що node.js завантажено та встановлено на ту саму робочу станцію, що й Visual Studio Code, щоб Power Pages функції працювали.
- Переконайтеся, що інстальовано тільки Power Platform Tools , а не Power Platform Tools та Power Platform Tools [ПІДГОТОВЧА ВЕРСІЯ] разом. Докладніше див. розділ про відомі проблеми.
вимоги
Перш ніж почати використовувати розширення Visual Studio Code для Power Pages, виконайте описані далі дії.
Завантажте, інсталюйте та налаштуйте Visual Studio Code. Додаткові відомості: Завантаження Visual Studio Code
Налаштуйте середовище та систему для підтримки CI/CD для Power Pages із використанням CLI. Додаткові відомості: Microsoft Power Platform CLI (підготовча версія)
Інсталяція розширення Visual Studio Code
Після інсталяції Visual Studio Code потрібно інсталювати розширення для компонента plug-in Power Platform Tools для Visual Studio Code.
Щоб інсталювати розширення Visual Studio Code, виконайте наступні дії.
Відкрийте Visual Studio Code.
Виберіть Розширення в області ліворуч.
Виберіть піктограму Параметри у верхній правій частині області розширень.
Знайдіть і виберіть Power Platform Tools.
Виберіть Інсталювати.
Перевірте у повідомленнях стану, чи розширення інстальовано успішно.
Завантаження вмісту веб-сайтів
Для автентифікації в середовищі Microsoft Dataverse та завантаження вмісту веб-сайту див. посібник Використання Microsoft Power Platform CLI з Power Pages – завантаження вмісту веб-сайтів.
Порада
Розширення «Power Platform Tools» автоматично вмикає використання команд Microsoft Power Platform CLI всередині Visual Studio Code у Вбудованому терміналі Visual Studio.
Піктограми файлів
Розширення Visual Studio Code для Power Pages автоматично виявляє та показує піктограми файлів і папок у завантаженому вмісті веб-сайтів.
Visual Studio Code використовує стандартну тему піктограм файлів, яка не показує піктограм, характерних для Power Pages. Щоб переглянути піктограми файлів, специфічні для ваших веб-сайтів, вам потрібно оновити Visual Studio екземпляр коду, щоб використовувати конкретну тему Power Pages піктограм файлу.
Щоб увімкнути тему піктограм файлів, характерну для порталів, виконайте наведені нижче дії.
Відкрийте Visual Studio Code.
Послідовно виберіть Файл>Параметри>Тема>Тема піктограм файлів
Виберіть тему для піктограм порталів PowerApps.
Динамічний попередній перегляд
Розширення Visual Studio Code дає змогу використовувати можливість динамічного попереднього перегляду сторінки вмісту Power Pages в інтерфейсі Visual Studio Code під час розробки.
Щоб переглянути підготовчу версію, виберіть 
у верхньому правому куті, коли HTML-файл відкрито в режимі редагування.
Область попереднього перегляду відкривається у правій частині сторінки, що редагується.
Функція попереднього перегляду для відображення попереднього перегляду вимагає, щоб інші файли відкривалися у тому ж сеансі Visual Studio Code, де створюється розмітка HTML. Наприклад, якщо відкрито лише файл HTML без структури папок, відкритої за допомогою Visual Studio коду, з’являється таке повідомлення.
Якщо виникне ця проблема, відкрийте папку, вибравши Файл > Відкрити папку, а тоді виберіть папку із завантаженим вмістом веб-сайту і відкрийте її, перш ніж знову відображати попередній перегляд.
Автозавершення
Можливість автозавершення в розширенні Visual Studio Code показує поточний контекст, який редагується, а також відповідні елементи автозавершення за допомогою IntelliSense.
Теги Liquid
Тепер під час настроювання завантаженого вмісту за допомогою Visual Studio Code можна використовувати IntelliSense для тегів Liquid Power Pages.
Почніть вводити текст, щоб побачити список тегів Liquid. Виберіть тег, щоб правильно його відформатувати, і продовжуйте вводити дані.
Об'єкти Liquid
Завершення кодів об'єкта Liquid ви можете побачити, якщо введете {{ }}. Коли курсор розташовано між дужками, натисніть <CTRL + space>, щоб відобразити список вибраних об’єктів Liquid, з-поміж яких можна вибирати. Якщо об’єкт має більше властивостей, можна ввести ., а потім знову натиснути <CTRL + space>, щоб переглянути певні властивості об’єкта Liquid.
Теги шаблонів
Щоб переглянути пропозиції веб-шаблонів Power Pages, наведіть курсор на вираз {include ' '} і натисніть <CTRL> - space. З’явиться список існуючих веб-шаблонів, які ви можете вибрати.
Створення, видалення та перейменування об’єктів веб-сайту
Всередині Visual Studio Code можна створювати, видаляти та перейменовувати такі компоненти веб-сайту:
- Веб-сторінки
- Шаблони сторінки
- Веб-шаблони
- Фрагменти вмісту
- Нові ресурси (веб-файли)
Операції створення
Ви можете використовувати опції контекстного меню для створення нових компонентів веб-сайту. Клацніть правою кнопкою миші один із підтримуваних об’єктів, виберіть Power Pages і виберіть тип об’єкта веб-сайту, який ви хочете створити.
Або ж натисніть Ctrl + Shift + P, щоб відобразити палітру команд Visual Studio Code.
Для створення об’єкта потрібно вказати більше параметрів.
| Об'єкт | Параметри |
|---|---|
| Веб-сторінки | Ім’я, шаблон сторінки, батьківська сторінка |
| Шаблони сторінки | Ім'я, веб-шаблон |
| Веб-шаблони | Ім'я |
| Фрагменти вмісту | Ім’я, а також чи буде фрагмент кодом HTML або текстом. |
| Нові ресурси (веб-файли) | Ім’я, батьківська сторінка, і виберіть файл для передавання. |
Операції видалення та перейменування
Для перейменування або видалення компонентів Power Pages використовуйте контекстне меню в області переходів.
Нотатка
Видалені об’єкти можна відновити з кошика на робочому столі.
Обмеження
На порталах наразі застосовуються такі обмеження щодо Power Platform Tools
- Функції автозаповнення підтримують лише обмежену функціональність.
- Live підготовча версія не підтримує користувацькі теми або рідкі об’єкти.
Пов’язані відомості
Power Pages Microsoft Power Platform підтримка CLI (підготовча версія)