现已发布!阅读关于 11 月新增功能和修复的内容。

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 Developer CLI 运行、创建 Azure 资源和部署 Azure 应用程序。

支持的编程语言

所有主要运行时均已预装

  • Python - 3.12.9
  • Java - openjdk 17.0.16 2025-07-15 LTS
    • OpenJDK Runtime Environment Microsoft-11926113 (build 17.0.16+8-LTS)
    • OpenJDK 64-Bit Server VM Microsoft-11926113 (build 17.0.16+8-LTS, mixed mode, sharing)
  • 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 集成,将代码更接近开发人员。在 **Chat Playground** (聊天游乐场)、**Agent Playground** (代理游乐场) 和 **Microsoft Foundry 主页** 等环境中,可以直接使用 **Open in VS Code for the Web** (在 VS Code for the Web 中打开) 等按钮。有关更多信息,请参阅示例用例或场景部分。

开始使用

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

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

  1. 打开 Microsoft Foundry 主页(https://ai.azure.com
  2. 查看主页上生成的建议代码片段
  3. 选择 **Open in VS Code** (在 VS Code 中打开),一键创建基于生成代码的代理。

此外,开发人员还可以使用 AI App Gallery (https://aka.ms/aiapps) 中的模板入门,并选择 **Open in VS Code** (在 VS Code 中打开),将模板一次性启动到 /azure 环境。

开始使用

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

我们还与 Azure 门户进行了集成。开发人员现在可以从 Azure Copilot 中访问“Open in VS Code”按钮,当他们生成代码时。

开始使用

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

示例用例或场景

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

  • 使用 Microsoft Foundry 创建代理

    1. 访问 Microsoft Foundry NextGen 门户,并在为您的代理生成的代码旁边选择 **Open in VS Code** (在 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 Models 中的 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. 进入代理游乐场,修改生成控件,如最大响应数和过去的消息。添加知识、工具和操作。

      Screenshot that shows model output

    4. 迭代您的示例提示,并在代理游乐场中继续进行实验。

    5. 满意后,选择 **View Code** (查看代码) 按钮,查看您的代理在代理游乐场中交互的上下文代码示例。

      Screenshot that shows view code button

      在那里,您可以看到 Python、C# 和 JavaScript 的多语言代码示例,用于代理,并且包含 JSON、cURL、JavaScript、C# 和 Go,对于模型,Entra ID 可用于使用现在可用于模型的“密钥授权”对代理进行身份验证。

      Screenshot that shows EntraID auth

    6. 准备好后,选择 **Open in VS Code** (在 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 预配 Web 应用,创建相关的 Azure 资源。完成后,您可以通过选择终端中提供的链接在浏览器中看到您的应用程序正在运行。

      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 Toolkit 构建和测试 AI 代理

    主要功能

    • 模型目录,包含丰富的生成式 AI 模型来源(GitHub、ONNX、OpenAI、Anthropic、Google 等)
    • 从远程托管模型或本地运行的 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.