使用 Visual Studio Code 扩展

备注

从 2022 年 10 月 12 日起,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 的门户支持配置门户。

说明如何安装和设置 Power Platform Tools 的动画。

先决条件

在将 VS Code 扩展用于 Power Apps 门户之前,您必须:

安装 VS Code 扩展

安装 Visual Studio Code 后,需要为 VS Code 安装 Power Apps 门户插件的扩展。

安装 VS Code 扩展:

  1. 打开 Visual Studio Code。

  2. 从左窗格中选择 扩展图标。 (扩展)。

    选择扩展。

  3. 从扩展窗格的右上方选择 “设置”图标。

  4. 搜索并选择 Power Platform Tools

    选择 Power Platform Tools。

  5. 选择安装

  6. 从状态消息验证扩展是否已成功安装。

下载门户内容

要针对 Microsoft Dataverse 环境进行身份验证和下载门户内容,请参阅教程将 Microsoft Power Platform CLI 与门户结合使用 - 下载门户内容

提示

Power Platform Tools 扩展自动启用通过 Visual Studio 集成终端在 VS Code 中使用 Microsoft Power Platform CLI 命令。

片段支持

使用 VS Code 自定义下载的内容时,您现在可以为 Power Apps 门户 Liquid 标记使用 IntelliSense。

包含实体 Liquid 标记完成示例的片段。

文件图标

门户的 VS Code 扩展会自动识别并显示下载的门户内容中的文件和文件夹的图标。

具有特定于门户的文件图标主题的起点门户中的文件列表。

VS Code 使用默认的文件图标主题,它不显示特定于门户的图标。 要查看特定于门户的文件图标,您必须更新 VS Code 实例来使用特定于门户的文件图标主题。

启用特定于门户的文件图标主题:

  1. 打开 Visual Studio Code。

  2. 转到文件 > 首选项 > 文件图标主题

  3. 选择 Power Apps 门户图标的主题。

    选择 Power Apps 门户图标的主题。

实时预览

Visual Studio Code 扩展支持实时预览选项,可以在开发体验期间在 Visual Studio Code 界面内查看门户内容页面。

要查看预览,请在编辑模式下打开 HTML 文件时从右上角选择 预览按钮。

页面预览。

预览窗格在正在编辑的页面右侧打开。

显示文件列表的屏幕,在 VS Code 编辑器中打开文件,右侧显示预览。

预览功能需要其他文件也在同一 VS Code 会话中打开,这些文件构成要显示的预览的 HTML 标记。 例如,如果只打开 HTML 文件而不使用 VS Code 打开文件夹结构,您将看到以下消息。

运行提供的命令:“microsoft-powerapps-portals.preview-show”失败。

出现此问题时,使用文件 > 打开文件夹打开文件夹,选择要打开的下载的门户内容文件夹,然后再次尝试预览。

自动完成

VS Code 扩展中的自动完成功能通过 IntelliSense 显示正在编辑的当前上下文,以及相关的自动完成元素。

页面模板 ID 的自动完成示例。

限制

门户的 Power Platform Tools 目前适用以下限制:

另请参见

Microsoft Power Platform CLI 的门户支持(预览)