Visual Studio Code 是一款轻量级、功能强大的源代码编辑器，适用于 Windows、macOS 和 Linux。 它支持 JavaScript、TypeScript 和 Node.js，并为其他语言（如 C++、C#、Java、Python、PHP 和 Go）以及运行时（如 .NET 和 Unity）提供了丰富的扩展生态系统。 了解有关 Visual Studio Code 的更多信息，请参阅 开始使用 VS Code 。
Visual Studio Code 允许您通过扩展来扩展您的功能。 Visual Studio Code 扩展可以为整体体验添加更多功能。 随着此功能的发布，您现在可以使用 Visual Studio Code 扩展来处理 Power Pages。
Power Pages 的 Visual Studio Code 扩展
Power Platform Tools 添加了使用 Visual Studio Code 配置网站的功能，使用内置的 Liquid 语言 IntelliSense 在使用 Visual Studio Code 自定义网站界面时启用代码完成、协助和提示方面的帮助。 使用 Visual Studio Code 扩展，您还可以通过 Microsoft Power Platform CLI 配置门户。
备注
先决条件
在将 Visual Studio Code 扩展用于 Power Pages 之前，您必须：
下载、安装和配置 Visual Studio Code。 详细信息：下载 Visual Studio Code
使用 CLI 为 Power Pages CI/CD 支持配置环境和系统。 详细信息：Microsoft Power Platform CLI（预览）
安装 Visual Studio Code 扩展
安装 Visual Studio Code 后，需要为 Visual Studio Code 安装 Power Platform tools 插件的扩展。
安装 Visual Studio Code 扩展：
打开 Visual Studio Code。
从左窗格中选择扩展。
从扩展窗格的右上角选择 设置图标。
搜索并选择 Power Platform Tools。
选择安装。
从状态消息验证扩展是否已成功安装。
小费
Power Platform Tools 扩展自动启用通过 Visual Studio 集成终端在 Visual Studio Code 中使用 Microsoft Power Platform CLI 命令。
Power Pages 个操作
Power Pages 操作可简化站点管理，减少对 Microsoft Power Platform CLI 命令的依赖。 Power Pages 操作可在 Visual Studio Code 的资源管理器侧边栏标题为 Power Pages 操作的窗格中使用。
在此窗格中，站点分类如下：
- 活动网站：选定环境中当前可用且处于活动状态的站点。
- 不活动的站点：环境中存在但当前未激活的站点。
- 其他站点：本地下载但尚未与所选环境关联的站点。
更改环境
要切换环境：
选择 Power Pages 操作窗格中的更改环境按钮。
从显示的列表中选择所需的环境。
当您选择环境时，站点列表会自动更新。
站点操作
不同类型的站点提供特定于上下文的操作，可以通过右键单击进行访问。
活动网站操作
右键单击活动网站可访问以下操作：
- 预览：清除缓存并在 VS 代码中打开网站，以便立即预览。
- 上传：将本地更改上传回您的环境。
- 下载：将网站内容下载到本地文件夹，以便离线编辑。
- 网站详细信息：显示网站的详细信息。
- 在资源管理器中显示：导航至包含网站代码的本地目录。
- 在 Power Pages 工作室中打开：在 Power Pages 工作室中打开网站。
非活动网站操作
非活动网站提供以下操作：
- 打开网站管理：在 Power Pages Management 应用程序中打开网站。
- 网站详细信息：提供所选网站的详细信息，如网站 ID、网站 URL、数据模型版本等。
其他网站操作
存储在本地但尚未进入环境的网站提供以下操作：
- 上传网站：将本地网站上传到已连接的环境中。 上传后，站点会出现在非活动站点列表中，您可以从 Power Pages 主页激活它。
- 在资源管理器中显示：导航至包含网站代码的本地目录。
文件图标
Power Pages 的 Visual Studio Code 扩展会自动识别并显示下载的网站内容中的文件和文件夹的图标。
Visual Studio Code 使用默认的文件图标主题，它不显示特定于 Power Pages 的图标。 要查看网站的特定文件图标，必须更新 Visual Studio Code 实例以使用 Power Pages 特定文件图标主题。
启用特定于门户的文件图标主题：
打开 Visual Studio Code。
转到文件>首选项>主题>文件图标主题
选择 PowerApps 门户图标的主题。
站点预览
预览操作使用 Visual Studio Code 的 Microsoft Edge DevTools 扩展提供编辑器内网站预览。 该功能在 VS Code 中运行 Microsoft Edge DevTools 和带有设备仿真功能的嵌入式 Microsoft Edge 浏览器，为您提供与完整 Microsoft Edge DevTools 几乎相同的所有调试和检查功能。
预览始终显示您上传到站点的更改，因此请确保在打开预览之前推送任何本地编辑。 每次启动预览版时，网站缓存都会自动清除，以确保您查看最新的更新。
要打开预览，请右键单击 Power Pages 操作 下的活动网站，然后选择预览。 此操作将打开指向所选网站的嵌入式 Microsoft Edge 浏览器。
预览窗格在右侧打开。
自动完成
Visual Studio Code 扩展中的自动完成功能通过 IntelliSense 显示正在编辑的当前上下文，以及相关的自动完成元素。
Liquid 标记
使用 Visual Studio Code 自定义下载的内容时，您现在可以为 Power Pages Liquid 标记使用 IntelliSense。
开始键入以查看 Liquid 标签列表。 选择一个标签以正确设置其格式，然后继续输入。
Liquid 对象
您可以通过输入 {{ }} 来查看 Liquid 对象代码的完成。 将光标放在括号之间，选择 <CTRL + space> 以显示您可以选择的 Liquid 对象列表。 如果对象具有更多属性，可以输入 .，然后再次选择 <CTRL + space> 查看 Liquid 对象的特定属性。
模板标记
您可以将光标放在 {include ' '} 语句中并选择 <CTRL> - space 来查看 Power Pages Web 模板建议。 此时将显示现有 Web 模板的列表供您选择。
创建、删除和重命名网站对象
从 Visual Studio Code 中，您可以创建、删除和重命名以下网站组件：
- 网页
- 页面模板
- Web 模板
- 内容片段
- 新资产（Web 文件）
创建操作
您可以使用上下文菜单选项来创建新的网站组件。 右键单击其中一个支持对象，选择 Power Pages，然后选择要创建的网站对象类型。
或者，您可以通过选择 Ctrl + Shift + P 来使用 Visual Studio Code 命令面板。
您需要指定更多参数来创建对象。
| Object | 参数设置 |
|---|---|
| 网页 | 名称、页面模板、父页面 |
| 页面模板 | 名称、Web 模板 |
| Web 模板 | 客户 |
| 内容片段 | 名称，以及片段是 HTML 还是文本。 |
| 新资产（Web 文件） | 名称、父页面并选择要上载的文件。 |
重命名和删除操作
从文件导航中，您可以使用上下文菜单重命名或删除 Power Pages 组件。
备注
已删除的对象可以从桌面回收站恢复。
限制
门户的 Power Platform Tools 目前适用以下限制：
- 自动完成功能仅支持有限的功能。