Web 版 VS Code - Azure

VS Code for the Web 是 Visual Studio Code 的零安装、基于浏览器的版本。/azure(简称)环境可通过 https://vscode.dev/azure 访问,它是专为 Azure 开发打造的空间,让您能够在几秒钟内运行、调试并将应用程序部署到 Azure。

该环境由 Azure Cloud Shell 提供支持,可提供长达 4 小时的计算时间,无需手动配置开发环境或安装依赖项。/azure 预装了最新的库、扩展和工具,让您可以立即开始编码。

VS Code for the Web Azure

入门

/azure 环境包含您开始开发和部署 Azure 应用程序所需的一切

预装扩展

Azure Developer CLI - 此扩展使运行、创建 Azure 资源以及使用 Azure Developer CLI 部署 Azure 应用程序变得更加容易。

支持的编程语言

所有主流运行时均已预装

  • Python - 3.12.9
  • Java - openjdk 17.0.16 2025-07-15 LTS
    • OpenJDK 运行时环境 Microsoft-11926113 (build 17.0.16+8-LTS)
    • OpenJDK 64 位服务器虚拟机 Microsoft-11926113 (build 17.0.16+8-LTS, 混合模式, 共享)
  • Node.js - v20.14.0
  • C# - 9.0.304

GitHub 仓库

使用 GitHub Repository 扩展无缝地将更改直接提交到您的 GitHub 仓库。GitHub Repositories 允许您直接在编辑器内远程浏览和编辑仓库,而无需将代码拉取到本地计算机。您可以在我们的 GitHub Repositories 指南中了解有关该扩展及其工作原理的更多信息。

继续在桌面版 VS Code 中工作

在 Azure Cloud Shell 容器时间用尽后,您可能希望继续在桌面版 VS Code 中工作。使用 VS Code for the Web 状态栏中的继续工作 (Continue Working on) 按钮,将您的代码提交到 GitHub 中的选定仓库,并切换到您的本地环境。

在此体验中,您有两种本地继续工作的选择

  • 使用 Docker:启动一个预先配置好的开发容器。
  • 使用本地 VS Code:克隆仓库并使用 README 文件配置您的环境。

Azure 入口点

/azure 体验集成了 Microsoft Foundry,旨在拉近代码与开发者的距离。在 VS Code for the Web 中打开 (Open in VS Code for the Web) 等按钮可直接在 Chat PlaygroundAgent PlaygroundMicrosoft Foundry 主页等环境中找到。请参阅“示例用例或场景”部分了解更多信息。

开始使用

  1. 选择一个模型。
  2. 构建并测试您的代理。
  3. 选择查看代码 (View Code),然后选择您的编程语言和 SDK。
  4. 通过一键式在 VS Code 中打开 (Open in VS Code for the Web) 按钮直接启动 VS Code。

或者,您也可以从 Microsoft Foundry 主页创建代理

  1. 打开 Microsoft Foundry 主页 (https://ai.azure.com)
  2. 查看在主页上生成的建议代码片段
  3. 选择在 VS Code 中打开 (Open in VS Code),通过一键式体验根据生成的代码创建代理

此外,开发者可以使用 AI 应用库 (AI App Gallery, https://aka.ms/aiapps) 中的模板入门,并选择在 VS Code 中打开 (Open in VS Code),以一步操作将其模板启动到 /azure 环境中。

开始使用

  1. 导航至 AI 应用库 (https://aka.ms/aiapps)
  2. 选择模板或搜索您想要运行的模板
  3. 从下拉菜单中选择在 VS Code 中打开 (Open in VS Code)
  4. 直接启动 VS Code 并使用 GitHub Copilot 回答您可能有的任何问题。

我们还集成了 Azure 门户。现在,当开发者使用 Azure Copilot 生成代码时,可以访问“在 VS Code 中打开”按钮。

开始使用

  1. 打开 Azure 门户并使用您的 Azure 帐户登录
  2. 导航到 Azure Copilot 并开始开发您想要构建的场景
  3. 一旦 Copilot 生成代码,选择生成的代码文件并选择在 VS Code 中打开 (Open in VS Code)
  4. 直接在 VS Code 中启动,并使用 GitHub Copilot 回答任何后续问题。

示例用例或场景

以下是 \azure 环境的常用场景。

  • 使用 Microsoft Foundry 创建代理

    1. 访问 Microsoft Foundry NextGen 门户,并在为您代理生成的代码旁选择在 VS Code 中打开 (Open in VS Code)
    2. 等待 VS Code for the Web - Azure 环境初始化并设置您的环境
    3. 阅读 README 文件并按照步骤运行 create_and_run_agent.py 文件
    4. 您的代理已成功创建并运行!继续使用(预装的)Foundry 扩展来微调您的代理,或按照以下步骤使用您的代理创建应用程序
  • 使用 Microsoft Foundry 创建模型部署并在 VS Code 中打开代码

    1. 在 Microsoft Foundry 门户中,为您的用例选择最佳模型,包括 Foundry 模型中的 o3、o4-mini 或 MAI-DS-R1。在本例中,我们将以 gpt-4o-mini 为例演示代理工作流。

      Screenshot that shows Microsoft Foundry Portal

    2. 从 gpt-4o-mini 模型卡片中配置模型终结点。

      Screenshot that shows Microsoft Foundry Portal Model

    3. 进入代理试验场 (agents playground),修改最大响应 (max responses) 和历史消息 (past messages) 等生成控件。添加知识、工具和操作。

      Screenshot that shows model output

    4. 迭代您的示例提示词 (prompt),并在代理试验场中继续试验。

    5. 完成后,选择查看代码 (View Code) 按钮,查看与代理在代理试验场中交互的上下文代码示例。

      Screenshot that shows view code button

      在这里,您可以看到 Python、C# 和 JavaScript 语言的多种代理代码示例;对于模型,还包含了 JSON、cURL、JavaScript、C# 和 Go 示例。Entra ID 可用于验证代理,且模型现已支持“密钥授权 (Key Authorization)”。

      Screenshot that shows EntraID auth

    6. 准备好后,选择在 VS Code 中打开 (Open in VS Code),并被重定向到 VS Code for the Web 的 /azure 环境。

      Screenshot that shows Open in VS Code button

      您会注意到,随着环境的设置,代码示例、API 终结点和密钥会自动导入到新的 VS Code for the Web 工作区中。

      Screenshot that shows loading dial

      在右下角,您会看到 API 密钥已在终端的环境变量中设置,并且示例代码已成功下载。

      Screenshot that shows loaded environment

    7. 通过终端执行 python agent_run.py 在本地运行模型。几秒钟内,您就会看到成功的模型响应。

      Screenshot that shows agent python file

    8. azd 命令可用于使用该代理配置和部署 Web 应用程序。azd init 会初始化 git 仓库,创建一个默认的 Azure 工作区,在该工作区中代理可用于应用程序。

      Screenshot that shows azd init

    9. azd up 通过创建相关的 Azure 资源来配置 Web 应用程序。完成后,选择终端中提供的链接,即可在浏览器中看到正在运行的应用程序

      Screenshot that shows azd up

    10. 选择左下角的“在桌面上继续 (Continue on Desktop)”,在桌面版 VS Code 或 GitHub Desktop 中继续工作。此按钮允许您一键将工作区移动到本地环境。如果您有附加到现有应用程序的开发容器,您可以选择使用该容器或移动到本地环境。

      Screenshot that shows Continue On button

  • 快速启动 Azure Function 应用程序

    上述快速入门适用于 vscode.dev/azure,因为 vscode.dev/azure 涵盖了所有先决条件

    • 已安装 Python
    • 已安装 Azure Functions Core Tools
    • 您需要自行安装这些组件
    • Azure Functions 扩展
  • 使用 AI 工具包 (AI Toolkit) 构建和测试 AI 代理

    主要功能

    • 拥有丰富生成式 AI 模型源的模型目录(GitHub、ONNX、OpenAI、Anthropic、Google 等)
    • 自带模型 (Bring Your Own Models):来自远程托管的模型,或本地运行的 Ollama 模型
    • 用于模型推理或通过聊天进行测试的试验场
    • 支持多模态语言模型的附件
    • 针对选定 AI 模型的批量运行提示词
    • 使用数据集评估 AI 模型,支持常见的评估指标,如 F1 分数、相关性、相似度、连贯性等
  • 利用 VS Code 扩展和 Python 进行快速原型设计

  • 使用 Azure Copilot 创建、编辑和部署代理

限制

尽管 VS Code for the Web 在功能上几乎与桌面版 VS Code 持平,但开发环境仍存在一些限制

  • 除 Cloud Shell 外,没有终端访问权限
  • 对某些原生扩展或语言功能的支持有限
  • 不支持离线模式

故障排除

如果您在使用 VS Code for the Web – Azure 时遇到任何问题,请在我们的 GitHub 仓库中记录问题

连接问题

如果您无法连接到 https://vscode.dev/azure,通常可以通过重置 Azure Cloud Shell 来解决。这可以在 Azure 门户中完成。

使用右上角的按钮在 Azure 门户中打开 Cloud Shell。

Screenshot that shows Azure Portal

接下来,在设置下拉菜单中,选择重置用户设置 (Reset User Settings)

Screenshot that shows Settings

完成后,您应该会看到此屏幕。

Screenshot that shows Azure Cloud Shell

收集日志

扩展日志将帮助我们诊断有关 vscode.dev/azure 的任何问题。您可以通过转到“输出 (Output)”视图,然后选择 VS Code for the Web - Azure 输出通道来访问它们。

Screenshot that shows Logs

Screenshot that shows Logs

通过以下资源继续学习和探索

反馈与支持

在使用 vscode.dev/azure 时,若发现问题,请在我们的 GitHub 仓库中创建议题。细节越详尽越好。如果可能,请附上来自“VS Code for the Web - Azure”输出通道的日志。

© . This site is unofficial and not affiliated with Microsoft.