参加你附近的 ,了解 VS Code 中的 AI 辅助开发。

Web 版 VS Code - Azure

面向 Web 的 VS Code 是 Visual Studio Code 的零安装、基于浏览器的版本。https://insiders.vscode.dev/azure 提供(简称为)/azure 环境,这是一个专用于 Azure 开发的空间,让您可以在几秒钟内运行、调试应用程序并将其部署到 Azure。

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

入门

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

预安装的扩展

Azure Developer CLI - 此扩展使您可以使用 Azure Developer CLI 更轻松地运行、创建 Azure 资源并部署 Azure 应用程序。

支持的编程语言

所有主要运行时均已预安装

  • Python - 3.12.9
  • Java - openjdk 17.0.14 2025-01-21 LTS
    • OpenJDK Runtime Environment Microsoft-10800290 (build 17.0.14+7-LTS)
    • OpenJDK 64 位服务器 VM Microsoft-10800290 (build 17.0.14+7-LTS, 混合模式,共享)
  • Node.js - v20.14.0
  • C# - 9.0.0

GitHub 存储库

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

继续在桌面版 VS Code 中工作

Azure Cloud Shell 容器时间用完后,您可能希望继续在桌面版 VS Code 中工作。使用位于面向 Web 的 VS Code 状态栏中的“继续工作于”按钮,将您的代码提交到 GitHub 中选择的存储库,并切换到您的本地环境。

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

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

Azure 入口点

/azure 体验与 Azure AI Foundry 集成,使代码更贴近开发人员。像“在面向 Web 的 VS Code 中打开”这样的按钮直接在“聊天游乐场”和“代理游乐场”等环境中可用。请参阅示例用例或场景部分了解更多信息。

开始使用

  1. 选择一个模型。
  2. 构建并测试您的代理。
  3. 选择“查看代码”,然后选择您的编程语言和 SDK。
  4. 单击“在面向 Web 的 VS Code 中打开”按钮,直接启动 VS Code。

此外,开发人员可以使用 AI 应用库 (https://aka.ms/aiapps) 从模板开始,并选择“在 VS Code 中打开”,通过一次操作将其模板启动到 /azure 环境中。

开始使用

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

示例用例或场景

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

  • 使用 Azure AI Foundry 创建模型部署并在 VS Code 中打开您的代码

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

      Screenshot that shows Azure AI Foundry Portal

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

      Screenshot that shows Azure AI Foundry Portal Model

    3. 进入代理游乐场,修改生成控制,例如最大响应和历史消息。添加知识、工具和操作。

      Screenshot that shows model output

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

    5. 满意后,选择“查看代码”按钮以查看您与代理游乐场中代理交互的上下文代码示例。

      Screenshot that shows view code button

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

      Screenshot that shows EntraID auth

    6. 准备就绪后,选择“在 VS Code 中打开”并重定向到面向 Web 的 VS Code 的 /azure 环境。

      Screenshot that shows Open in VS Code button

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

      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. 通过选择左下角的“在桌面版上继续”,继续在桌面版 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 扩展
  • 使用 Azure AI 工具包构建和测试 AI 代理

    主要功能

    • 包含丰富的生成式 AI 模型来源的模型目录(GitHub、ONNX、OpenAI、Anthropic、Google 等)
    • 从远程托管模型或本地运行的 Ollama 模型中引入您自己的模型
    • 用于模型推理或通过聊天进行测试的游乐场
    • 多模态语言模型的附件支持
    • 批量运行选定 AI 模型的提示
    • 使用数据集评估 AI 模型,以支持 F1 分数、相关性、相似性、连贯性等流行的评估器
  • 使用 VS Code 扩展和 Python 进行快速原型开发

限制

尽管面向 Web 的 VS Code 几乎与桌面版 VS Code 相同,但开发环境仍存在一些限制

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

故障排除

如果您在使用面向 Web 的 VS Code - Azure 时遇到任何问题,请在我们的 GitHub 存储库中记录问题

帐户类型提示问题

如果您看到提示“您使用哪种类型的帐户启动此隧道?”,则可能是您正在使用 vscode.dev/azure 而不是 insiders.vscode.dev/azure。目前此产品仅在 Insiders 上可用。要解决此问题,请导航到 https://insiders.vscode.dev/azure

Screenshot that shows Account Type

连接问题

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

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

Screenshot that shows Azure Portal

接下来,在“设置”下拉菜单中,选择“重置用户设置”。

Screenshot that shows Settings

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

Screenshot that shows Azure Cloud Shell

收集日志

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

Screenshot that shows Logs

Screenshot that shows Logs

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

反馈和支持

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