Використання розширення 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, виконайте наступні дії.

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

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

   

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

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

   

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

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

Порада

Розширення «Power Platform Tools» автоматично вмикає використання команд Microsoft Power Platform CLI всередині Visual Studio Code у Вбудованому терміналі Visual Studio.

Power Pages Дії

Power Pages Дії спрощують керування сайтом і зменшують залежність від Microsoft Power Platform команд CLI. Power Pages Дії доступні на панелі під назвою Power Pages «Дії » на бічній панелі Провідника Коду Visual Studio .

У цій панелі сайти поділяються на такі категорії:

• Активні сайти: сайти, які наразі доступні та активні у вибраному середовищі.
• Неактивні сайти: сайти, які присутні в середовищі, але наразі не активні.
• Інші сайти: сайти, завантажені локально, але ще не пов’язані з вибраним середовищем.

Зміна середовища

Щоб переключитися між середовищами:

1. Виберіть на кнопці «Змінити середовище » в Power Pages області «Дії».

   

2. Виберіть потрібне середовище зі списку, що з’явиться.

Коли ви вибираєте середовище, список сайтів оновлюється автоматично.

Дії для сайтів

Різні типи сайтів надають дії з урахуванням контексту, доступ до яких можна отримати, клацнувши правою кнопкою миші.

Активні дії на сайтах

Клацніть правою кнопкою миші на Активні сайти, щоб отримати доступ до наступних дій:

• Попередній перегляд: очищає кеш і відкриває сайт у VS Code для негайного перегляду.
• Завантажити: вивантажує локальні зміни назад у ваше середовище.
• Завантажити: завантажує вміст сайту в локальну папку для редагування в автономному режимі.
• Відомості про сайт: відображає детальну інформацію про сайт.
• Показати в Провіднику: перехід до локального каталогу, що містить код сайту.
• Відкрити в Power Pages студії: відкриває сайт у Power Pages студії.

Неактивні дії на сайтах

Неактивні сайти надають такі дії:

• Відкрити керування сайтом: відкриває сайт у Power Pages програмі керування.
• Відомості про сайт: надає детальну інформацію про вибраний сайт, як-от ідентифікатор веб-сайту, URL-адресу веб-сайту, версію моделі даних тощо.

Дії на інших сайтах

Сайти, що зберігаються локально, але ще не перебувають у вашому середовищі, пропонують такі дії:

• Завантажити сайт: завантажує локальний сайт у ваше підключене середовище. Після завантаження сайт з’явиться в списку Неактивні сайти, де ви можете активувати його з Power Pages дому.
• Показати в Провіднику: перехід до локального каталогу, що містить код сайту.

Піктограми файлів

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

Visual Studio Code використовує стандартну тему піктограм файлів, яка не показує піктограм, характерних для Power Pages. Щоб переглянути піктограми файлів, специфічні для ваших веб-сайтів, вам потрібно оновити екземпляр коду Visual Studio , щоб використовувати конкретну тему Power Pages піктограм файлу.

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

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

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

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

   

Попередній перегляд сайту

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

Попередній перегляд завжди показує зміни, які ви завантажили на свій сайт, тому переконайтеся, що ви внесли всі локальні зміни, перш ніж відкривати його. Щоразу, коли ви запускаєте попередній перегляд, кеш сайту автоматично очищається, щоб забезпечити перегляд останніх оновлень.

Щоб відкрити вікно попереднього перегляду, клацніть правою кнопкою миші свій активний сайт у розділі Power Pages «Дії» та виберіть « Попередній перегляд». Ця дія відкриває вбудований Microsoft Edge браузер, вказуючи на обраний вами сайт.

Панель попереднього перегляду відкриється з правого боку.

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

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

• Функції автозаповнення підтримують лише обмежену функціональність.

Пов’язані відомості

Power Pages Microsoft Power Platform підтримка CLI (попередній перегляд)