網頁版 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 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 首頁等環境中使用。請參閱「範例使用案例或情境」章節以了解更多資訊。

開始使用

  1. 選擇模型。
  2. 建置並測試您的代理程式。
  3. 選擇檢視程式碼 (View Code),然後選擇您的程式語言和 SDK。
  4. 透過一鍵式在 VS Code for the Web 開啟」按鈕直接啟動。

或者,您也可以從 Microsoft Foundry 首頁建立代理程式:

  1. 開啟 Microsoft Foundry 首頁 (https://ai.azure.com)
  2. 檢視首頁上產生的建議程式碼片段
  3. 選擇在 VS Code 開啟,即可一鍵建立基於所產生程式碼的代理程式

此外,開發人員可以使用 AI App Gallery (https://aka.ms/aiapps) 透過範本入門,並選擇在 VS Code 開啟,以透過單一操作將範本啟動至 /azure 環境。

開始使用

  1. 導覽至 AI App Gallery (https://aka.ms/aiapps)
  2. 選擇一個範本或搜尋您想要執行的範本
  3. 從下拉式選單中選擇在 VS Code 開啟
  4. 直接啟動至 VS Code,並使用 GitHub Copilot 回答您可能有的任何問題。

我們也與 Azure 入口網站進行了整合。開發人員現在可以在 Azure Copilot 產生程式碼時,存取「在 VS Code 開啟」按鈕。

開始使用

  1. 開啟 Azure 入口網站並使用您的 Azure 帳戶登入
  2. 導覽至 Azure Copilot 並開始開發您想要建置的情境
  3. 當 Copilot 產生程式碼後,選取產生的程式碼檔案並選擇在 VS Code 開啟
  4. 直接在 VS Code 中啟動,並使用 GitHub Copilot 回答後續問題。

範例使用案例或情境

以下是 \azure 環境的常用情境:

  • 使用 Microsoft Foundry 建立代理程式

    1. 存取 Microsoft Foundry NextGen 入口網站,並在代理程式產生的程式碼旁邊選擇在 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. 進入代理程式遊樂場,調整產生控制項,例如最大回應數與過去訊息。新增知識、工具與動作。

      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. 準備好後,選擇在 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 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 的任何問題。您可以透過前往「輸出」檢視,然後選取 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.