使用 Web 版 Visual Studio Code 编辑代码（预览）

[本主题是预发行文档，有可能会有所更改。]

在设计工作室中，您可以使用 Visual Studio Code 网页版编辑站点代码。 此功能允许您编辑以下网站元数据的静态内容、HTML、CSS、Liquid 和 JavaScript：

元数据	内容
高级窗体（多步窗体）	JavaScript
基本窗体	JavaScript
内容片段	所有支持的内容片段内容
列表	JavaScript
Web 文件	查看和下载媒体文件。 编辑文本（代码）文件。
网页	所有支持的内容（按语言）、JavaScript 和 CSS
Web 模板	所有支持的内容

备注

您将无法创建元数据记录，只能添加和编辑内容、代码以及查看/下载文件附件。

Visual Studio Code 网页版提供了免费的零安装 Microsoft Visual Studio Code 体验，可完全在您的浏览器中运行，您能够浏览站点代码，以及快速安全地进行轻量代码更改。 详细信息：Visual Studio Code 网页版体验。

重要提示

• 这是一项预览功能。
• 预览功能不适合生产使用且功能可能受限。 这些功能在正式发布之前推出，以便客户可以提前使用并提供反馈。

备注

• 首次加载 Visual Studio Code 网页版时可能需要一些时间，因为系统将会安装此功能的必需扩展。
• 不支持文件创建、删除和重命名操作。
• 此功能将利用 Power Platform Tools Web 扩展。 Web 扩展受浏览器沙盒限制，因此与正常扩展相比，存在一些限制。
  • Power Platform不支持 CLI。
  • Power Platform Tools Web 扩展功能仅限于 Power Pages 代码编辑体验。
  • 该功能在政府社区云（GCC）、政府社区云（GCC High）和国防部（DoD）中不可用。 这些区域中的用户将使用门户管理应用来编辑代码。 有关详细信息，请参阅在门户管理应用中编辑代码。

编辑设计工作室中可用的代码

通过从编辑下拉菜单中选择编辑网站代码选项，您可以从 Power Pages 主页使用 Visual Studio Code（Web 版）开始编辑您的网站代码。

您还可以在设计工作室中从以下区域编辑代码：

• 从页面工作区编辑网页代码
• 从页面工作区编辑页眉模板代码
• 从样式工作区编辑自定义 CSS 代码
• 编辑多步窗体的自定义 JavaScript 代码
• 编辑基本窗体的自定义 JavaScript 代码
• 编辑列表的自定义 JavaScript
• 编辑内容片段
• 编辑 web 模板
• 查看和下载媒体 web 文件（图像）
• 编辑基于文本的 Web 文件（CSS、JavaScript、其他）

下面我们看一下如何使用这些区域来编辑代码。

从页面工作区编辑网页代码

当您打开 Power Pages 设计工作室时，您会在页面菜单¹中和屏幕右上角²看到编辑代码选项。

从页面工作区编辑页眉模板代码

选择编辑站点页眉，然后选择编辑代码打开代码编辑器。

从样式工作区编辑自定义 CSS 代码

转到样式工作区，然后选择可用的自定义 CSS 编辑代码菜单，以打开代码编辑器。

合并冲突通知

如果您在与其他开发人员合作，可能会在某些情况下处理同一源代码。 如果您尝试保存对过时文件的更改，您将收到比较或覆盖更改的通知。

比较代码将与代码一起显示当前代码，并允许您恢复到现有更改、单独接受每个更改或使用您的更改并覆盖现有内容。

您可以查看最新的内容，并可以合并或覆盖代码或者放弃更改。

教程：使用 Visual Studio Code 网页版编辑站点代码

在本教程中，您将演练如何使用 Visual Studio Code Web 版编辑站点代码。

步骤 1：使用 Web 版 Visual Studio Code 编辑站点代码

1. 在 Power Pages 设计工作室中打开您的站点

2. 选择右上角的编辑代码

   

3. 从确认对话框中选择打开 Visual Studio Code。

4. 使用您的环境凭据登录到 Visual Studio Code。

5. 等待 Power Platform Tools Web 扩展完成初始化，并等待网页代码加载到左侧窗格中。

步骤 2：更新内容和代码

1. 屏幕左侧的资源管理器加载相应的网站配置元数据，这些元数据可以使用 Visual Code Web 版进行编辑。

   

2. 对相应的元数据文件进行更改，然后按 Ctrl+S 保存更改。

3. 转到设计工作室并选择同步，以拉取当前设计工作室中的所有更新内容。

   

4. 选择预览以查看对 Power Pages 站点所做的更改。

使用 Web 版 Visual Studio Code 或 Visual Studio Code 桌面版

用户可以使用 Visual Studio Code 网页版编辑、调试和预览对页面代码所做的更改，而无需使用外部工具。 Visual Studio Code 桌面版提供其他高级功能，用于编辑所有站点元数据以及与 GitHub、框架和持续集成/持续开发 (CI/CD) 流程集成。

特性	Web 版 VS Code	VS Code 桌面版
创建新网站配置元数据记录	否	仅限于网页、页面模板、Web 模板、内容片段和 Web 文件。
直接站点编辑	是	否
站点元数据编辑	仅限于编辑网页、内容片段、基本窗体、多步窗体、列表和 web 模板。	所有 Power Pages 元数据配置
站点预览	已计划	已计划
Power Platform CLI 支持	否	是
高级 CPU 和存储绑定工作流 - ReactJS 或其他框架生成工作支持	否	是
与 GitHub 集成，包含代码签入、签出、管理冲突和合并等功能。	否	是

在门户管理应用中编辑代码

备注

• 政府社区云（GCC）、政府社区云（GCC High）和国防部（DoD）不支持使用 Visual Studio Code（Web 版）来编辑网站。 这些区域中的用户可以使用门户管理应用进行相应更改。

如果相应区域不支持 Web 版 Visual Studio Code，在命令栏中选择代码编辑器图标 </> 将打开门户管理应用。

导航到相应的网页、基本窗体、多步窗体、列表或 Web 模板记录，以编辑代码。

类型​​	代码位置
网页	选择网页记录。 从本地化内容部分中选择网页内容记录。 可以在常规选项卡上的副本 (HTML) 字段中编辑页面副本。 自定义 JavaScript 和自定义 CSS 可以在高级选项卡中进行编辑。
基本窗体	选择基本窗体记录。 在其他设置选项卡中编辑自定义 JavaScript。
多步窗体	选择多步窗体记录。 从窗体步骤选项卡中选择多步窗体步骤。 在窗体选项选项卡上编辑自定义 JavaScript。
List	选择列表记录。 在选项选项卡中编辑自定义 JavaScript。
Web 模板	选择 Web 模板记录。 在常规选项卡上编辑源。

保存记录，并预览您的网站以测试代码。

另请参见

• 使用 Visual Studio Code 和 Microsoft Power Platform CLI