網頁版 VS Code - Azure
VS Code for the Web 是 Visual Studio Code 的免安裝、基於瀏覽器的版本。/azure 環境(簡稱)可透過 https://vscode.dev/azure 存取,這是專為 Azure 開發打造的空間,讓您能在幾秒鐘內執行、偵錯並部署應用程式至 Azure。
此環境由 Azure Cloud Shell 驅動,提供長達 4 小時的運算時間,無需手動設定開發環境或安裝相依項目。/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 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 整合,讓程式碼更貼近開發人員。「在 VS Code for the Web 開啟」等按鈕可直接在聊天遊樂場 (Chat Playground)、代理程式遊樂場 (Agent Playground) 以及 Microsoft Foundry 首頁等環境中使用。請參閱「範例使用案例或情境」章節以了解更多資訊。
開始使用
- 選擇模型。
- 建置並測試您的代理程式。
- 選擇檢視程式碼 (View Code),然後選擇您的程式語言和 SDK。
- 透過一鍵式「在 VS Code for the Web 開啟」按鈕直接啟動。
或者,您也可以從 Microsoft Foundry 首頁建立代理程式:
- 開啟 Microsoft Foundry 首頁 (https://ai.azure.com)
- 檢視首頁上產生的建議程式碼片段
- 選擇在 VS Code 開啟,即可一鍵建立基於所產生程式碼的代理程式
此外,開發人員可以使用 AI App Gallery (https://aka.ms/aiapps) 透過範本入門,並選擇在 VS Code 開啟,以透過單一操作將範本啟動至 /azure 環境。
開始使用
- 導覽至 AI App Gallery (https://aka.ms/aiapps)
- 選擇一個範本或搜尋您想要執行的範本
- 從下拉式選單中選擇在 VS Code 開啟
- 直接啟動至 VS Code,並使用 GitHub Copilot 回答您可能有的任何問題。
我們也與 Azure 入口網站進行了整合。開發人員現在可以在 Azure Copilot 產生程式碼時,存取「在 VS Code 開啟」按鈕。
開始使用
- 開啟 Azure 入口網站並使用您的 Azure 帳戶登入
- 導覽至 Azure Copilot 並開始開發您想要建置的情境
- 當 Copilot 產生程式碼後,選取產生的程式碼檔案並選擇在 VS Code 開啟
- 直接在 VS Code 中啟動,並使用 GitHub Copilot 回答後續問題。
範例使用案例或情境
以下是 \azure 環境的常用情境:
-
- 存取 Microsoft Foundry NextGen 入口網站,並在代理程式產生的程式碼旁邊選擇在 VS Code 開啟
- 讓 VS Code for the Web - Azure 環境初始化並設定您的環境
- 閱讀 README 檔案並依照步驟執行 create_and_run_agent.py 檔案
- 您的代理程式已成功建立並執行!繼續使用 Foundry 擴充功能(已預先安裝)來微調您的代理程式,或依照下方步驟使用您的代理程式建立應用程式
-
使用 Microsoft Foundry 建立模型部署並在 VS Code 中開啟程式碼
-
從 Microsoft Foundry 入口網站中,為您的使用案例選擇最佳模型,包括 Foundry 模型中的 o3、o4-mini 或 MAI-DS-R1。在此範例中,我們將使用 gpt-4o-mini 作為代理程式工作流程的範例模型。

-
從 gpt-4o-mini 模型卡片佈建模型端點。

-
進入代理程式遊樂場,調整產生控制項,例如最大回應數與過去訊息。新增知識、工具與動作。

-
疊代您的範例提示詞,並在代理程式遊樂場中繼續實驗。
-
完成後,選擇檢視程式碼 (View Code) 按鈕,即可查看您與代理程式互動的相關程式碼範例。

在那裡,您可以查看 Python、C# 和 JavaScript 的多語言代理程式程式碼範例,並包含 JSON、cURL、JavaScript、C# 與 Go 的模型範例;現在可以使用 Entra ID 對模型進行「金鑰授權」驗證。

-
準備好後,選擇在 VS Code 開啟,系統將重新導向至 VS Code for the Web 的 /azure 環境。

您會注意到在環境設定過程中,程式碼範例、API 端點與金鑰會自動匯入至新的 VS Code for the Web 工作區中。

在右下角,您會看到 API 金鑰已設定在終端機的環境變數中,且範例程式碼已成功下載。

-
透過終端機執行
python agent_run.py以在本機執行模型。幾秒鐘內,您就會看到成功的模型回應。
-
azd命令可用於佈建並部署使用該代理程式的 Web 應用程式。azd init會初始化 git 儲存庫,這會建立一個預設的 Azure 工作區,讓代理程式能在應用程式中使用。
-
azd up會在建立相關 Azure 資源的同時佈建 Web 應用程式。完成後,您可以透過選取終端機中提供的連結,在瀏覽器中查看正在執行的應用程式。
-
透過選擇左下角的「在桌面版繼續 (Continue on Desktop)」,在桌面版 VS Code 或 GitHub Desktop 中繼續工作。此按鈕可讓您透過單一操作將工作區移至您的本機環境。如果您有附加至現有應用程式的開發容器,您可以選擇使用該容器移轉或移至本機環境。

-
-
上述快速入門適用於 vscode.dev/azure,因為 vscode.dev/azure 涵蓋了所有先決條件
- 已安裝 Python
- 已安裝 Azure Functions Core Tools
- 您需要自行安裝這些項目
- Azure Functions 擴充功能
-
主要功能
- 擁有豐富生成式 AI 模型來源的模型目錄(GitHub、ONNX、OpenAI、Anthropic、Google 等)
- 引入您自己的模型(遠端代管模型,或在本機執行的 Ollama 模型)
- 用於模型推論或透過聊天進行測試的遊樂場
- 支援多模態語言模型的附件
- 為選定的 AI 模型進行批次執行提示詞
- 使用資料集評估 AI 模型,支援熱門評估指標如 F1 分數、相關性、相似度、連貫性等
限制
儘管 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。

接著,在「設定」下拉式選單中,選擇重設使用者設定 (Reset User Settings)。

完成後,您應該會看到此畫面。

收集記錄
擴充功能記錄將協助我們診斷 vscode.dev/azure 的任何問題。您可以透過前往「輸出」檢視,然後選取 VS Code for the Web - Azure 輸出通道來存取它們。


相關資源
透過以下資源持續學習與探索
意見反應與支援
當您在使用 vscode.dev/azure 時發現問題,請在我們的 GitHub 儲存庫中建立問題。細節越詳盡越好。若可能,請附上來自「VS Code for the Web - Azure」輸出通道的記錄。