Visual Studio Code 網頁版

Visual Studio Code 網頁版提供免費、無需安裝的 Microsoft Visual Studio Code 體驗，完全在您的瀏覽器中執行。它讓您可以快速且安全地瀏覽原始程式碼儲存庫，並進行輕量級的程式碼變更。若要開始使用，請在瀏覽器中前往 https://vscode.dev。

VS Code 網頁版具備您所喜愛的 VS Code 桌面版中的許多功能，包括在瀏覽和編輯時的搜尋與語法標示，以及支援擴充功能，以便您處理程式碼基底並進行簡單的編輯。除了從 GitHub 和 Azure Repos 等原始碼控制提供者開啟儲存庫、分支 (fork) 和提取要求 (pull request) 外，您也可以處理儲存在本機電腦上的程式碼。

VS Code 網頁版完全在您的網頁瀏覽器中執行，因此與桌面版體驗相比存在某些限制，您可以在下方閱讀更多相關資訊。

以下影片簡要概述了 Visual Studio Code 網頁版。

與 VS Code 桌面版的關係

VS Code 網頁版提供基於瀏覽器的體驗，用於導覽檔案和儲存庫以及提交輕量級的程式碼變更。然而，如果您需要執行階段環境來執行、建置或偵錯程式碼，想要使用終端機等平台功能，或是想要執行網頁版不支援的擴充功能，我們建議您改用桌面應用程式、GitHub Codespaces，或是使用 Remote - Tunnels 來使用 VS Code 的完整功能。此外，VS Code 桌面版讓您可以使用不受瀏覽器限制的完整鍵盤快速鍵。

當您準備好進行切換時，只需點擊幾下即可「升級」至完整的 VS Code 體驗。

您也可以透過選擇齒輪圖示，然後選擇 **Switch to Insiders Version...** (切換至 Insiders 版本...)，或者直接前往 https://insiders.vscode.dev，在 VS Code 網頁版的穩定版 (Stable) 與 Insiders 版之間進行切換。

開啟專案

透過前往 https://vscode.dev，您可以建立新的本機檔案或專案、處理現有的本機專案，或是存取託管在其他地方的原始程式碼儲存庫，例如 GitHub 和 Azure Repos (Azure DevOps 的一部分)。

您可以如同在 VS Code 桌面環境中一樣，在網頁版建立新的本機檔案。使用指令選擇區 (F1) 中的 **File** (檔案) > **New File** (新增檔案)。

GitHub 儲存庫

您可以直接從 URL 在 VS Code 網頁版中開啟 GitHub 儲存庫，遵循以下格式：https://vscode.dev/github/<organization>/<repo>。以 VS Code 儲存庫為例，看起來會是這樣：https://vscode.dev/github/microsoft/vscode。

此體驗是透過自訂的 vscode.dev/github URL 所提供，並由 GitHub Repositories 擴充功能（屬於更廣泛的 Remote Repositories 擴充功能的一部分）提供支援。

GitHub Repositories 讓您可以從編輯器內遠端瀏覽和編輯儲存庫，而無需將程式碼提取到本機電腦。您可以在我們的 GitHub Repositories 指南中進一步了解該擴充功能及其運作方式。

注意：GitHub Repositories 擴充功能也適用於 VS Code 桌面版，以提供快速的儲存庫瀏覽和編輯功能。安裝該擴充功能後，您可以使用 **GitHub Repositories: Open Repository...** 指令來開啟儲存庫。

您也可以透過安裝適用於 Chrome 和 Edge 的 vscode.dev 擴充功能，透過瀏覽器的搜尋列 (即網址列) 在 vscode.dev 中開啟 GitHub 儲存庫。接著，輸入 code 來啟動網址列，後接您的儲存庫名稱。建議項目會根據您的瀏覽器搜尋記錄產生，因此如果找不到您要的儲存庫，您也可以直接輸入完整的 <owner>/<repo> 名稱來開啟它，例如 microsoft/vscode。

如果您已經在 https://vscode.dev 的 VS Code 網頁版中，您也可以透過 Remote Repositories 擴充功能指令來瀏覽不同的儲存庫。選擇狀態列左下角的遠端指示器，系統會顯示 **Open Remote Repository...** (開啟遠端儲存庫) 指令。

Azure Repos

您可以在 VS Code 網頁版中開啟 Azure Repos，方式與 GitHub 儲存庫相同。

當您導覽至格式為 https://vscode.dev/azurerepos/<organization>/<project>/<repo> 的 URL 時，您將能夠讀取、搜尋儲存庫中的檔案，並將您的變更提交至 Azure Repos。您可以擷取 (fetch)、提取 (pull)、同步變更並檢視分支。

您可以透過在 Azure Repos URL 前加上 vscode.dev，在 VS Code 網頁版中開啟 Azure Repos 的任何儲存庫、分支或標籤。

或者，當您在 Azure DevOps 儲存庫或提取要求頁面上時，可以按下 (.) 在 VS Code 網頁版中開啟它。

更多自訂 URL

與桌面版一樣，您可以透過豐富的擴充功能生態系統來自訂 VS Code 網頁版，這些擴充功能幾乎支援所有後端、語言和服務。vscode.dev 包含了一些 URL，可提供常用體驗的捷徑。

我們已經探索了幾個 URL (vscode.dev/github 和 vscode.dev/azurerepos)。以下是更完整的清單：

請注意，某些 URL 必須以特定方式輸入（例如，vscode.dev/editor/liveshare 需要處於有效的 Live Share 工作階段中）。請查閱各項服務的文件以取得特定的存取與使用資訊。

下方有關於其中一些 URL 的更多資訊。

佈景主題

您可以透過 URL 格式：https://vscode.dev/editor/theme/<extensionId>，在 VS Code 網頁版中共用並體驗色彩佈景主題。

例如，您可以前往 https://vscode.dev/editor/theme/sdras.night-owl 來體驗 Night Owl 佈景主題，而無需經過下載和安裝過程。

注意：此色彩佈景主題 URL 格式適用於完全宣告式（無程式碼）的佈景主題。

一個擴充功能可以定義多個佈景主題。您可以使用 /editor/theme/<extensionId>/<themeName> 的格式。如果未指定 themeName，VS Code 網頁版將採用第一個佈景主題。

身為佈景主題作者，您可以將下列徽章新增至您的擴充功能讀我檔案 (readme)，讓使用者能輕鬆在 VS Code 網頁版中試用您的佈景主題（將 <extensionId> 取代為您佈景主題擴充功能的唯一識別碼）。

[![Preview in vscode.dev](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/editor/theme/<extensionId>)

Visual Studio Live Share

Live Share 來賓工作階段可透過瀏覽器中的 https://vscode.dev/editor/liveshare URL 存取。sessionId 將會傳遞給擴充功能，以實現順暢的加入體驗。

在不同環境繼續工作

在某些情況下，您會希望存取能夠執行程式碼的不同環境。您可以切換至開發環境中的儲存庫，該環境支援本機檔案系統以及完整的語言與開發工具。

GitHub Repositories 擴充功能讓您可以輕鬆地在本機複製 (clone) 儲存庫、在桌面版重新開啟，或為目前儲存庫建立 GitHub Codespace（如果您已安裝 GitHub Codespaces 擴充功能並具備建立 GitHub Codespaces 的權限）。若要執行此操作，請使用指令選擇區 (F1) 中可用的 **Continue Working On...** (繼續工作於...) 指令，或點擊狀態列中的「遠端」指示器。

儲存與共用工作成果

在網頁版處理本機檔案時，如果您啟用了 自動儲存 (Auto Save)，您的工作成果會自動儲存。您也可以像在桌面版 VS Code 中一樣手動儲存 (例如 **File** > **Save**)。

在處理遠端儲存庫時，您的工作成果會儲存在瀏覽器的本機儲存空間中，直到您提交為止。如果您使用 GitHub Repositories 開啟儲存庫或提取要求，可以在原始碼控制檢視中推送 (push) 您的變更，以永久保留任何新的工作成果。

您也可以透過 繼續工作於 (Continue Working On) 在其他環境中繼續工作。

當您第一次對未提交的變更使用 **Continue Working On** 時，您可以選擇使用 **Cloud Changes** (雲端變更) 將編輯內容帶到您選擇的開發環境，該功能使用 VS Code 服務來儲存您的待處理變更。這在 GitHub Repositories 文件中有更進一步的說明。

使用 Remote Tunnels 連結至您自己的運算執行個體

您可以使用 Remote - Tunnels 擴充功能，在 VS Code 網頁版中針對另一台機器進行開發。

Remote - Tunnels 擴充功能可讓您透過安全通道連接到遠端機器，例如桌上型電腦或虛擬機器 (VM)。接著，您可以從任何地方安全地連接到該機器，而無需使用 SSH。這讓您可以將自己的運算資源帶到 vscode.dev，從而在瀏覽器中執行程式碼等更多情境中啟用該功能。

您可以在其文件中深入了解 Remote - Tunnels。

安全探索

VS Code 網頁版完全在您的網頁瀏覽器沙箱中執行，並提供非常有限的執行環境。

存取遠端儲存庫中的程式碼時，網頁編輯器不會「複製 (clone)」儲存庫，而是直接從您的瀏覽器呼叫服務 API 來載入程式碼；這進一步減少了複製不受信任的儲存庫時的攻擊面。

處理本機檔案時，VS Code 網頁版透過瀏覽器的檔案系統存取 API 載入這些檔案，這些 API 會限制瀏覽器可存取的範圍。

隨處執行

與 GitHub Codespaces 類似，VS Code 網頁版可以在 iPad 等平板電腦上執行。

語言支援

網頁版中的語言支援較為細緻，包含程式碼編輯、導覽和瀏覽。桌面版體驗通常由預期具備檔案系統、執行階段和運算環境的語言服務和編譯器驅動。在瀏覽器中，這些體驗則由在瀏覽器中執行的語言服務驅動，這些服務提供原始程式碼標記化 (tokenization) 和語法色彩標示、自動完成，以及許多單一檔案的操作。

通常，體驗分為以下幾類：

• 良好：對於大多數程式語言，VS Code 網頁版為您提供程式碼語法色彩標示、文字型自動完成以及括號對色彩標示。透過 anycode 擴充功能使用 Tree-sitter 語法樹，我們能夠為熱門語言（如 C/C++、C#、Java、PHP、Rust 和 Go）提供額外的體驗，例如 **Outline/Go to Symbol** (大綱/跳至符號) 和 **Symbol Search** (符號搜尋)。
• 更好：TypeScript、JavaScript 和 Python 體驗皆由在瀏覽器中原生執行的語言服務提供支援。使用這些程式語言，您將獲得「良好」的體驗，再加上豐富的單一檔案自動完成、語意標示、語法錯誤偵測等功能。
• 最佳：對於許多「網頁」語言，例如 JSON、HTML、CSS 和 LESS 等，vscode.dev 中的程式碼撰寫體驗與桌面版幾乎相同（包括 Markdown 預覽！）。

您可以透過狀態列中的「語言狀態指示器」來判斷您目前檔案的語言支援程度。

限制

由於 VS Code 網頁版完全在瀏覽器內執行，與桌面應用程式相比，某些體驗自然會受到更多限制。例如，無法使用終端機和偵錯工具，這是合理的，因為您無法在瀏覽器沙箱內編譯、執行和偵錯 Rust 或 Go 應用程式。

延伸模組

僅有一部分擴充功能可在瀏覽器中執行。您可以使用「擴充功能」檢視在網頁版中安裝擴充功能；無法安裝的擴充功能會有警告圖示和「了解原因 (Learn Why)」連結。我們預期未來將有更多擴充功能獲得支援。

當您安裝擴充功能時，它會儲存在瀏覽器的本機儲存空間中。您可以透過啟用 設定同步 (Settings Sync)，確保您的擴充功能在不同的 VS Code 執行個體（包括不同的瀏覽器甚至桌面版）之間保持同步。

當擴充功能套件 (Extension Pack) 包含無法在瀏覽器沙箱中執行的擴充功能時，您會收到一則資訊訊息，並可選擇檢視套件中包含的擴充功能。

當擴充功能在瀏覽器沙箱中執行時，它們會受到更多限制。純宣告式的擴充功能（例如大多數的佈景主題、程式碼片段或語法定義）可以未經修改地執行，並可在 VS Code 網頁版中使用，無需擴充功能作者進行任何修改。執行程式碼的擴充功能則需要更新以支援在瀏覽器沙箱中執行。您可以在網頁擴充功能作者指南中進一步了解在瀏覽器中支援擴充功能所需的條件。

此外，還有一些僅具備部分支援的擴充功能可在瀏覽器中執行。一個很好的例子是將其支援限制為單一檔案或目前開啟檔案的語言擴充功能。

檔案系統 API

Edge 和 Chrome 目前支援 檔案系統 API，允許網頁存取本機檔案系統。如果您的瀏覽器不支援檔案系統 API，您將無法在本機開啟資料夾，但仍可選擇開啟個別檔案。

瀏覽器支援

您可以在最新版本的 Chrome、Edge、Firefox 和 Safari 中使用 VS Code 網頁版。各瀏覽器的舊版本可能無法運作——我們僅保證對最新版本的支援。

提示：檢查相容瀏覽器版本的一種方法是查看目前用於測試 VS Code 的 Playwright 版本，並審查其支援的瀏覽器版本。您可以在 VS Code 儲存庫的 package.json 檔案中的 devDependencies/@playwright/test 找到目前使用的 Playwright 版本。一旦您知道 Playwright 版本（例如 1.37），就可以查看其發行說明中的「瀏覽器版本 (Browser Versions)」部分。

Webview 在 Firefox 和 Safari 中顯示的方式可能會有所不同，或出現一些非預期的行為。您可以在 VS Code GitHub 儲存庫中檢視問題查詢，以追蹤與特定瀏覽器相關的問題，例如使用 Safari 標籤和 Firefox 標籤。

您可以採取額外的步驟來改善使用 VS Code 網頁版的瀏覽器體驗。請參閱其他瀏覽器設定部分以獲取更多資訊。

行動裝置支援

您可以在行動裝置上使用 VS Code 網頁版，但較小的螢幕可能會有一些限制。

鍵盤快速鍵

某些鍵盤快速鍵在網頁版中的運作方式也可能不同。

其他瀏覽器設定

當您在瀏覽器中使用 VS Code 時，可以執行額外的瀏覽器設定步驟。

開啟新分頁和視窗

在某些情況下，您可能需要在處理 VS Code 網頁版時開啟新分頁或視窗。當從剪貼簿讀取內容時，VS Code 可能會要求您授權存取。根據您的瀏覽器，您可以透過不同方式授予剪貼簿存取權或允許彈出視窗：

• Chrome、Edge、Firefox：在瀏覽器設定中搜尋「網站權限 (site permissions)」，或查看網址列右側的相關選項。

• Safari：在 Safari 瀏覽器中，前往 **Preferences...** (偏好設定) > **Websites** (網站) > **Pop-up Windows** (彈出式視窗) > 您正在存取的網域（例如 vscode.dev），然後從下拉式選單中選擇 **Allow** (允許)。

5/28/2026