Використання розширення Visual Studio Code

Visual Studio Code – це спрощений, але потужний редактор вихідного коду, який запускається на комп'ютері й доступний для Windows, macOS і Linux. Програма має вбудовану підтримку JavaScript, TypeScript і Node.js, а також багату екосистему розширень для інших мов (наприклад, C++, C#, Java, Python, PHP і Go) і середовищ виконання (наприклад, .NET і Unity). Для отримання додаткових відомостей див. Початок роботи з 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.

Нотатка

• Для того, щоб функції Power Pages могли працювати, необхідно завантажити й інсталювати node.js на ту саму робочу станцію, що й Visual Studio Code.
• Переконайтеся, що інстальовано тільки 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, виконайте наступні дії.

1. Відкрийте Visual Studio Code.

2. Виберіть Розширення в області ліворуч.

   

3. Виберіть піктограму Параметри у верхній правій частині області розширень.

4. Знайдіть і виберіть Power Platform Tools.

   

5. Виберіть Інсталювати.

6. Перевірте у повідомленнях стану, чи розширення інстальовано успішно.

Завантаження вмісту веб-сайтів

Для автентифікації в середовищі 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 Code і використовувати спеціальну тему піктограм для файлів Power Pages.

Щоб увімкнути тему піктограм файлів, характерну для порталів, виконайте наведені нижче дії.

1. Відкрийте Visual Studio Code.

2. Послідовно виберіть Файл>Параметри>Тема>Тема піктограм файлів

3. Виберіть тему для піктограм порталів PowerApps.

   

Динамічний попередній перегляд

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

Щоб відобразити попередній перегляд, виберіть у правому верхньому куті, коли файл HTML відкрито у режимі редагування.

Область попереднього перегляду відкривається у правій частині сторінки, що редагується.

Функція попереднього перегляду для відображення попереднього перегляду вимагає, щоб інші файли відкривалися у тому ж сеансі Visual Studio Code, де створюється розмітка HTML. Наприклад, якщо відкрити за допомогою Visual Studio Code тільки HTML-файл без структури папок, відобразиться наведене нижче повідомлення.

Якщо виникне ця проблема, відкрийте папку, вибравши Файл > Відкрити папку, а тоді виберіть папку із завантаженим вмістом веб-сайту і відкрийте її, перш ніж знову відображати попередній перегляд.

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

Можливість автозавершення в розширенні 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

• Функції автозавершення мають обмежені функціональні можливості.
• Динамічний попередній перегляд не підтримує настроюваних тем та об'єктів Liquid.

Див. також

Підтримка Power Pages для Microsoft Power Platform CLI (підготовча версія)