參加你附近的 ,瞭解 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”輸出通道中的日誌。