Использование расширения Visual Studio Code
Действует с 12 октября 2022 г, в качестве порталов для Power Apps используется Power Pages. Дополнительная информация: Microsoft Power Pages теперь доступен для всех (блог)
Скоро мы мигрируем и объединим документацию порталов Power Apps с документацией Power Pages.
Обзор
Visual Studio Code (VS Code) — это лаконичный, но мощный редактор исходного кода, который работает на вашем рабочем столе и доступен для Windows, macOS и Linux. Он поставляется со встроенной поддержкой JavaScript, TypeScript и Node.js и имеет богатую экосистему расширений для других языков (таких как C++, C#, Java, Python, PHP и Go) и сред выполнения (таких как .NET и Unity). Дополнительные сведения см. в статье о начале работы с VS Code.
VS Code позволяет расширить ваши возможности за счет расширений. Расширения VS Code могут добавить больше функций к общему взаимодействию. С выпуском этой функции теперь вы можете использовать расширение VS Code для работы с порталами Power Apps.
Расширение VS Code для порталов
Power Platform Tools добавляет возможность настраивать порталы с помощью VS Code и использовать встроенный язык Liquid IntelliSense для упрощения завершения кода, с подсказками и помощью при настройке интерфейса порталов с помощью VS Code. Используя расширение VS Code, вы также можете настраивать порталы через поддержку порталов для Microsoft Power Platform CLI.
Предварительные условия
Перед использованием расширения VS Code для порталов Power Apps необходимо:
- Загрузить, установить и настроить Visual Studio Code. Дополнительные сведения: Загрузка Visual Studio Code
- Настройте свою среду и систему для порталов Power Apps с поддержкой CI/CD с помощью интерфейса командной строки. Больше информации: Поддержка порталов для Microsoft Power Platform CLI (предварительная версия)
Установка расширения VS Code
После установки Visual Studio Code необходимо установить расширение для подключаемого модуля порталов Power Apps для VS Code.
Для установки расширения VS Code:
- Откройте Visual Studio Code.
- Выберите (Расширения ) в левой области.
- Выберите в правом верхнем углу панели расширений.
- Найдите и выберите Power Platform Tools.
- Выберите Установить.
- Убедитесь, что расширение успешно установлено по сообщениям о состоянии.
Загрузите контент порталов
Для аутентификации в среде Microsoft Dataverse и чтобы загрузить контент порталов, обратитесь к учебнику Использование интерфейса командной строки Microsoft Power Platform с порталами — загрузка контента порталов.
Расширение Power Platform Tools автоматически позволяет использовать команды интерфейса командной строки Microsoft Power Platform из VS Code через встроенный терминал Visual Studio.
Поддержка фрагмента кода
При настройке загруженного контента с помощью VS Code теперь вы можете использовать IntelliSense для порталов Power Apps — теги Liquid.
Значки файла
Расширение VS Code для порталов автоматически определяет и отображает значки файлов и папок внутри загруженного содержимого порталов.
VS Code использует тему значка файла по умолчанию, которая не показывает значки, относящиеся к порталам. Чтобы просмотреть значки файлов, специфичные для ваших порталов, вам придется обновить экземпляр VS Code, чтобы использовать тему значков файлов, специфичную для порталов.
Для включения темы значков файлов, специфичных для порталов:
- Откройте Visual Studio Code.
- Перейдите Файл >Параметры >Тема значка файла
- Выберите тему для значков порталов Power Apps.
Предварительная версия в реальном времени
Расширение Visual Studio Code включает возможность предварительного просмотра в реальном времени для просмотра страницы с содержимым портала внутри интерфейса Visual Studio Code прямо во время разработки.
Для предварительного просмотра выберите в правом верхнем углу, если HTML-файл открыт в режиме правки.
Область предварительного просмотра открывается с правой стороны редактируемой страницы.
Функция предварительного просмотра требует, чтобы другие файлы также были открыты в той же сессии VS Code, которые составляют HTML-разметку для отображаемого предварительного просмотра. Например, если открыт только файл HTML, а структура папок не открыта с помощью VS Code, вы увидите следующее сообщение.
Когда эта проблема возникает, откройте папку с помощью команды Файл > Открыть папку и выберите загруженную папку содержимого портала, чтобы открыть ее, прежде чем пытаться снова открыть предварительный просмотр.
Автозавершение
Возможность автозавершения в расширении VS Code показывает текущий редактируемый контекст и соответствующие элементы авторазрешения через IntelliSense.
Ограничения
Следующие ограничения в настоящее время применяются к Power Platform Tools для порталов:
- Функции поддержки фрагмента кода и автозавершения поддерживают только ограниченную функциональность.
- Предварительный просмотр в реальном времени не поддерживает пользовательские темы или Liquid-объекты.
См. также
Обратная связь
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по
Установка и настройка VS code
Редактор кода Visual Studio Code или просто VS Code — бесплатный, мощный, очень популярный редактор кода разработанный корпорацией Microsoft.
VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.
Установка VS code
1) Переходим на официальный сайт и жмем «Download» (Скачать).
Сохраняем инсталятор (файл.exe ) в выбранную папку на своем ПК.
2) Запускаем скаченный инсталлятор (VSCodeUserSetup-версия.exe) и следуем инструкциям: принимаем, добавляем все галочки, далее, ждем пока программа установится на наш ПК.
3) VS Code установлен!
Запуск VS code
Жмем на ярлык:
При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые.
Вид стартовой страницы после установки VS code.
Весь интерфейс VS code на английском языке.
Для того чтобы интерфейс стал на русском языке, нужно установить расширение (приложение/плагин) для русского языка.
Уснановка расширений VS code
Уснановка расширения производится в следующем порядке:
- Открыть список расширений. Значок на левой боковой панели;
- В строке поиска набрать имя (или часть имяни) расширения;
- Из списка найденных расширений выбирать нужное;
- Устанавить выбранное расширение (кнопка «install»/»установить»).
Пример
Установка русского языка в VS code
После установки расширения (плагина) для русского языка интерфейс VS code переводится на русский язык.
Вид стартовой страницы после установки русского языка.
Как создать расширение Visual Studio Code
Visual Studio Code – это редактор кода от Microsoft, доступный для систем Windows, Linux и macOS. Для внедрения дополнительных функций он предлагает готовые расширения, которые вы можете установить через Visual Studio Code Marketplace. Но если вы не можете найти расширение, которое делает именно то, что вам нужно, вы можете создать необходимое расширение самостоятельно.
В этом руководстве вы узнаете, как создать свое первое расширение Visual Studio Code.
Требования
Для выполнения этого урока нужно:
- Загрузить и установить последнюю версию Visual Studio Code.
- Установить Node.js. Инструкции по установке зависят от дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
Это руководство было проверено на версиях Node v14.4.0, npm v6.14.5, yo v3.1.1 и generator-code v1.2.16.
1: Установка инструментов
Команда Visual Studio Code разработала специальный генератор для создания расширений. Он генерирует все необходимые стартовые файлы, чтобы вы легко могли начать создание вашего расширения.
Чтобы начать разработку расширений VS Code, вам понадобятся два пакета npm:
- yo – интерфейс командной строки для Yeoman.
- generator-code – генератор Yeoman для написания расширений Visual Studio Code.
Используйте встроенный терминал Visual Studio Code, чтобы при помощи npx запустить локальные копии yo и generator-code, а затем введите команду yo code для инициализации вашего нового проекта:
npx -p yo -p generator-code yo code
После этого Yeoman запустит генератор кода.
2: Создание расширения
Теперь вы готовы начать разработку вашего первого расширения. На вашем экране вы увидите сообщение:
Welcome to the Visual Studio Code Extension Generator!
Сейчас вам нужно будет ответить на несколько вопросов о проекте: указать, какое расширение вы создаете, а также выбрать между TypeScript и JavaScript. В этом уроке мы выберем JavaScript.
Затем вам будет предложено еще несколько вопросов. В этом мануале мы выбрали следующие ответы:
? What type of extension do you want to create? New Extension (JavaScript) ? What's the name of your extension? testytest ? What's the identifier of your extension? testytest ? What's the description of your extension? This is a test extension ? Enable JavaScript type checking in 'jsconfig.json'? Yes ? Initialize a git repository? Yes ? Which package manager to use? npm
После завершения этого процесса вы получите все файлы, необходимые для начала работы. Два самых важных файла:
- package.json
- extension.js
Откройте package.json и взгляните на его содержимое. Вы увидите название, описание проекта и т.п. В нем есть два очень важных раздела.
- activationEvents – это список событий, которые активируют ваше расширение. Расширения загружаются по ленивой загрузке, поэтому они не активируются, пока не произойдет одно из перечисленных событий.
- commands – список команд, которые пользователи смогут запускать через ваше расширение.
Мы вернемся к ним в ближайшее время.
Вы также можете просмотреть файл extension.js. В нем мы напишем код для нашего расширения. Здесь уже есть шаблонный код, давайте разберемся с ним.
В выделенной ниже строке мы регистрируем в VS Code нашу команду. Обратите внимание, что имя helloWorld совпадает с именем команды в package.json. Это не случайно. Пакет package.json определяет, какие команды доступны пользователю, но файл extension.js регистрирует код для этой команды.
// . /** * @param context */ function activate(context) < console.log('Congratulations, your extension "testytest" is now active!'); let disposable = vscode.commands.registerCommand('testytest.helloWorld', function () < vscode.window.showInformationMessage('Hello World from testytest!'); >); context.subscriptions.push(disposable); > // .
В этом примере наша команда будет только отображать на экране пользователя сообщение «Hello World».
3: Отладка расширения
Теперь, когда все необходимые файлы установлены, мы можем запустить наше расширение.
Папка .vscode – это место, где VS Code хранит конфигурационные файлы проекта. В нашем случае он включает файл launch.json, содержащий конфигурации отладки.
// . < // . "configurations": [ < "name": "Run Extension", "type": "extensionHost", "request": "launch", "runtimeExecutable": "$", "args": [ "--extensionDevelopmentPath=$" ] >, // . ] >
В этом файле проводится отладка расширения. Откройте вкладку debug в левой части экрана, а затем кликните на плей.
Это откроет новый (отладочный) экземпляр VS Code.
Открыв его, вы можете развернуть палитру команд (с помощью Command + Shift + P на Mac или Ctrl + Shift + P в Windows) и запустить Hello World.
Вы увидите всплывающее сообщение «Hello World» в правом нижнем углу.
4: Редактирование расширения
Прежде чем приступить к работе над кодом, давайте еще раз взглянем на раздел activateEvents в файле package.json. Как вы уже знаете, этот раздел содержит список событий, которые активируют наше расширение всякий раз, когда происходят. По умолчанию расширение активируется при запуске нашей команды.
Теоретически это событие может быть любым (что определяется символом *). Если установить для события активации значение *, то ваше расширение будет загружено при запуске VS Code.
Примечание: Этого делать не нужно, это просто комментарий.
Итак, у нас есть необходимые файлы и мы знаем, как их отлаживать. Приступим же к созданию нашего расширения. Предположим, мы хотим, чтобы это расширение создавало HTML-файл, который содержит шаблонный код и добавляется в наш проект.
Сначала давайте обновим название нашей команды. Откройте extension.js и обновите имя команды с extension.helloworld на extension.createBoilerplate.
// . /** * @param context */ function activate(context) < console.log('Congratulations, your extension "testytest" is now active!'); let disposable = vscode.commands.registerCommand('testytest.createBoilerplate', function () < vscode.window.showInformationMessage('Hello World from testytest!'); >); context.subscriptions.push(disposable); > // .
Соответствующим образом обновите package.json:
Теперь напишем наш функционал. Первое, что нужно сделать, это потребовать пару пакетов. Мы будем использовать модули fs (file system) и path. В файл extension.js поместите:
const fs = require('fs'); const path = require('path');
Также нам нужно получить путь к текущей папке. Внутри раздела command поместите следующий фрагмент:
if (!vscode.workspace) < return vscode.window.showErrorMessage('Please open a project folder first'); >const folderPath = vscode.workspace.workspaceFolders[0].uri .toString() .split(':')[1];
Нам также нужно присвоить шаблонный HTML-код переменной в файле extension.js, чтобы он автоматически записывался в файл. Вот этот шаблонный HTML:
const htmlContent = `Document `;
Теперь нужно вызвать функцию writeFile модуля файловой системы и передать ее в пути к папке и HTML-коде.
Обратите внимание, мы используем модуль path, чтобы объединить путь к папке с именем файла, который мы хотим создать. Если внутри обратного вызова есть ошибка, мы отображаем ее пользователю. В противном случае расширение сообщает, что шаблонный файл успешно создан:
fs.writeFile(path.join(folderPath, 'index.html'), htmlContent, (err) => < if (err) < return vscode.window.showErrorMessage('Failed to create boilerplate file!'); >vscode.window.showInformationMessage('Created boilerplate files'); >);
Вот как выглядит полный код extension.js:
//. let disposable = vscode.commands.registerCommand( 'testytest.createBoilerplate', async function () < // The code you place here will be executed every time your command is executed if (!vscode.workspace) < return vscode.window.showErrorMessage('Please open a project folder first'); >const folderPath = vscode.workspace.workspaceFolders[0].uri .toString() .split(':')[1]; const htmlContent = `Document `; fs.writeFile(path.join(folderPath, 'index.html'), htmlContent, (err) => < if (err) < return vscode.window.showErrorMessage( 'Failed to create boilerplate file!' ); >vscode.window.showInformationMessage('Created boilerplate files'); >); // . > // .
Попробуйте выполнить отладку вашего нового расширения. Откройте палитру команд и запустите Create Boilerplate (помните, мы изменили имя).
После выполнения команды вы увидите только что созданный файл index.html и сообщение, которое уведомляет вас об этом:
Created boilerplate files.
Заключение
Чтобы узнать больше о том, какие API можно использовать и как именно их использовать, прочтите документацию по API от Visual Studio.
Поиск, установка и управление расширениями для Visual Studio
Расширения — это пакеты кода, которые выполняются в Visual Studio и предоставляют новые или улучшенные функции. Расширения могут быть элементами управления, примерами, шаблонами, инструментами или другими компонентами, которые добавляют функциональные возможности в Visual Studio, например Live Share или GitHub Copilot.
Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace. Дополнительные сведения о поиске расширений см. в записи блога Где мои избранные расширения в Visual Studio 2022?.
Дополнительные сведения о новой модели расширяемости в настоящее время в предварительной версии см. в записи блога Build Better Extensions with VisualStudio.Extensibility (preview 3).
Расширения — это пакеты кода, которые выполняются в Visual Studio и предоставляют новые или улучшенные функции. Расширения могут быть элементами управления, примерами, шаблонами, инструментами или другими компонентами, которые добавляют функциональные возможности в Visual Studio, например Live Share или GitHub Copilot.
Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace.
Диалоговое окно «Управление расширениями»
В интегрированной среде разработки Visual Studio диалоговое окно «Управление расширениями » — это средство, используемое для поиска, установки и управления расширениями Visual Studio. Чтобы открыть диалоговое окно Управление расширениями, выберите Расширения>Управление расширениями. Или введите расширения в поле поиска и выберите «Управление расширениями«.
Левая панель классифицирует расширения по установленным, доступным в Visual Studio Marketplace (Online) и доступными обновлениями. Диспетчер перемещаемых расширений хранит список всех расширений Visual Studio, которые вы установили на любом компьютере или экземпляре Visual Studio. С его помощью вы легко сможете находить нужные вам расширения.
Поиск и установка расширений
Расширения можно установить в Visual Studio Marketplace или в диалоговом окне «Управление расширениями » в Visual Studio.
Чтобы установить расширения из Visual Studio, выполните указанные ниже действия.
- В диалоговом окне Расширения>Управление расширениями найдите расширение, которое вы намерены установить. (Если известно имя или часть имени расширения, можно выполнить поиск в окне Поиск.)
- Щелкните Скачать.
После завершения скачивания вы увидите уведомление в нижней части диалогового окна «Управление расширениями «: «Расширение запланировано на установку. Расширение будет установлено после закрытия всех экземпляров Visual Studio».
При попытке установить расширение, имеющее зависимости, то установщик проверяет, установлены ли эти зависимости. Если они не установлены, то в диалоговом окне Управление расширениями отображается список зависимостей, которые требуется установить перед установкой этого расширения.
Установка без использования диалогового окна «Управление расширениями»
Расширения, которые были упакованы в VSIX-файлах , могут быть доступны в расположениях, отличных от Visual Studio Marketplace. Несмотря на то что VSIX-файлы не обнаруживаются в диалоговом окне Расширения>Управление расширениями, такой файл можно установить, дважды щелкнув его или выбрав файл и нажав клавишу ВВОД. После этого следуйте инструкциям. После установки такое расширение можно будет включить, отключить или удалить в диалоговом окне Управление расширениями.
- Visual Studio Marketplace содержит расширения VSIX и MSI. Диалоговое окно «Управление расширениями» не может включать или отключать расширения на основе MSI.
- Если расширение MSI содержит файл extension.vsixmanifest, оно появляется в диалоговом окне Управление расширениями.
Удаление или отключение расширения
Если требуется прекратить использование расширения, его можно отключить или удалить. Отключенное расширение сохранится, но не будет загружаться. Найдите расширение и выберите «Удалить » или «Отключить«. Перезапустите Visual Studio, чтобы выгрузить отключенное расширение.
Отключать можно только расширения VSIX, но не расширения, которые были установлены с помощью MSI. Расширения, установленные с помощью MSI, можно только удалить.
Управление расширениями
Если вы управляете расширениями для организации или хотите узнать больше об автоматическом обновлении расширений, неответствующих уведомлениях и т. д., вы находитесь в правильном месте.
Расширения на уровне пользователя и администратора
Большинство расширений являются на пользователя и устанавливаются в папку %LocalAppData%\Microsoft\VisualStudio<\Visual Studio version>\Extensions\ . Несколько расширений являются административными расширениями и устанавливаются в папку <>установки Visual Studio\Common7\IDE\Extensions\.
Чтобы защитить систему от расширений, которые могут содержать ошибки или вредоносный код, можно ограничить для каждого пользователя расширения загружаться только в том случае, если Visual Studio выполняется с обычными разрешениями пользователя. Это означает, что расширения на уровне пользователя отключаются при запуске Visual Studio с повышенными разрешениями.
Чтобы ограничить загрузку расширений на уровне пользователя, выполните указанные ниже действия.
- Откройте страницу параметров расширений (Сервис>Параметры>Среда>Расширения).
- Снимите флажок Загружать расширения пользователей при выполнении от имени администратора.
- Перезапустите Visual Studio.
Автоматическое обновление расширений
Расширения обновляются автоматически при появлении новой версии в Visual Studio Marketplace. Новая версия расширения обнаруживается и устанавливается в фоновом режиме. При следующем открытии Visual Studio будет запущена новая версия расширения.
Функцию автоматического обновления можно отключить для всех или только определенных расширений.
- Чтобы отключить автоматическое обновление для всех расширений, щелкните ссылку Измените параметры расширений в диалоговом окне Расширения>Управление расширениями. В диалоговом окне Параметры снимите флажок Автоматически обновлять расширения.
- Чтобы отключить автоматическое обновление для конкретного расширения, снимите флажок Автоматически обновлять это расширение в области сведений о расширении в правой части диалогового окна Управление расширениями.
Уведомления об аварийном завершении работы или зависаниях
Visual Studio уведомляет вас о тех расширениях, которые могли вызвать аварийное завершение предыдущего сеанса. Когда Visual Studio аварийно завершает работу, сохраняется стек исключений. При следующем запуске Visual Studio стек проверяется, начиная с листового узла, в направлении базы. Если Visual Studio определяет, что кадр принадлежит модулю, который является частью установленного и включенного расширения, система выводит уведомление.
Visual Studio оповещает еще и о тех расширениях, которые могут приводить к недоступности интерфейса.
Получив такое оповещение, вы можете проигнорировать его или выполнить одно из следующих действий.
- Выберите Отключить это расширение. Visual Studio отключает расширение и сообщает, нужно ли перезагрузить компьютер, чтобы отключение вступило в силу. Если потребуется, вы можете снова включить расширение в диалоговом окне Расширения>Управление расширениями.
- Выберите Больше не показывать это сообщение.
- Если уведомление относилось к аварийному завершению в предыдущем сеансе, в Visual Studio больше не будет отображаться уведомление при аварийном завершении работы этого расширения. Этот выбор не влияет на уведомления Visual Studio о зависаниях, связанных с этим расширением, а также об аварийных завершениях и зависаниях, связанных с другими расширениями.
- Если же уведомление относилось к зависанию, в интегрированной среде разработки (IDE) больше не будут появляться уведомления о том, что это расширение связано с зависаниями. В Visual Studio по-прежнему будут отображаться уведомления об аварийном завершении работы этого расширения, а также об аварийном завершении работы и зависаниях других расширений.
Уведомление о зависании или аварийном завершении пользовательского интерфейса означает только то, что один из модулей конкретного расширения находился в стеке в тот момент, когда произошло аварийное завершение. Это не обязательно означает, что само расширение было виновником. Возможно, расширение вызвало внутренний код Visual Studio, который привел к аварийному завершению или зависанию пользовательского интерфейса. Однако уведомление может по-прежнему быть полезным, если расширение, которое привело к неответственности пользовательского интерфейса или аварийному сбою, не важно для вас. Отключив такое расширение, вы сможете избежать аналогичных проблем в будущем без ущерба для производительности.
Примеры
При установке примера из сети решение сохраняется в двух местоположениях:
- Рабочий экземпляр сохраняется в расположении, указанном при создании проекта.
- Отдельный контрольный экземпляр сохраняется на компьютере.
С помощью диалогового окна Расширения>Управление расширениями можно выполнить следующие задачи, связанные с примерами.
- Отобразить список контрольных экземпляров установленных образцов.
- Отключить или удалить контрольный экземпляр образца.
- Установить пакеты примеров — коллекции примеров, связанных с определенной технологией или функцией.
- Установить отдельные примеры из сети.
- Просмотреть уведомления об обновлениях, когда будут опубликованы изменения в исходном коде для установленных примеров.
- Обновите главную копию установленного примера при наличии уведомления об обновлении.
Связанный контент
- SDK для Visual Studio
- Страница расширяемости Visual Studio.
- Visual Studio Marketplace
- Поддержка пакета SDK для Visual Studio