Visual Studio Code 網頁版

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

VS Code 網頁版具有您喜愛的 VS Code Desktop 的許多功能，包括在瀏覽和編輯時的搜尋和語法醒目提示，以及擴充功能支援，可讓您處理程式碼庫並進行更簡單的編輯。除了從 GitHub 和 Azure Repos 等原始碼控制提供者開啟存放庫、分支和提取要求之外，您也可以使用儲存在本機電腦上的程式碼。

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

以下影片快速概觀 Visual Studio Code 網頁版。

與 VS Code Desktop 的關係

VS Code 網頁版提供基於瀏覽器的體驗，用於導覽檔案和存放庫，以及提交輕量級的程式碼變更。但是，如果您需要存取執行階段來執行、建置或偵錯您的程式碼，您想要使用平台功能 (例如終端機)，或者您想要執行網頁中不支援的擴充功能，我們建議您將工作移至桌面應用程式、GitHub Codespaces，或使用 遠端 - 通道 以獲得 VS Code 的完整功能。此外，VS Code Desktop 可讓您使用不受瀏覽器限制的完整鍵盤快速鍵集。

當您準備好切換時，您只需按幾下滑鼠即可「升級」到完整的 VS Code 體驗。

您也可以透過選取齒輪圖示，然後選取 [切換至 Insiders 版本...]，或直接導覽至 https://insiders.vscode.dev，在 VS Code 網頁版的穩定版和 Insiders 版本之間切換。

開啟專案

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

您可以在網頁中建立新的本機檔案，就像在 VS Code Desktop 環境中一樣，方法是從命令面板 (F1) 使用 [檔案] > [新增檔案]。

GitHub 存放庫

您可以依照以下結構描述，直接從 URL 在 VS Code 網頁版中開啟 GitHub 存放庫：https://vscode.dev/github/<organization>/<repo>。以 VS Code 存放庫 為例，看起來會像這樣：https://vscode.dev/github/microsoft/vscode。

此體驗是在自訂 vscode.dev/github URL 上交付的，該 URL 由 GitHub 存放庫擴充功能 (這是更廣泛的 遠端存放庫擴充功能的一部分) 提供技術支援。

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

注意：GitHub 存放庫擴充功能也適用於 VS Code Desktop，以提供快速的存放庫瀏覽和編輯。安裝擴充功能後，您可以使用 [GitHub 存放庫：開啟存放庫...] 命令開啟存放庫。

您也可以透過瀏覽器的搜尋列 (又稱網址列) 在 vscode.dev 中開啟 GitHub 存放庫，方法是為 Chrome 和 Edge 安裝 vscode.dev 擴充功能。然後，輸入 code 以啟動網址列，然後輸入存放庫的名稱。建議會由您的瀏覽器搜尋記錄填入，因此如果您想要的存放庫沒有出現，您也可以輸入完整的 <擁有者>/<存放庫> 名稱來開啟它，例如 microsoft/vscode。

如果您已經在 https://vscode.dev 的 VS Code 網頁版中，您可以透過 遠端存放庫擴充功能命令，導覽至不同的存放庫。選取狀態列左下角的遠端指示器，您將看到 [開啟遠端存放庫...] 命令。

Azure Repos

您可以像在 VS Code 網頁版中開啟 Github 存放庫一樣開啟 Azure Repos。

當您導覽至結構描述為 https://vscode.dev/azurerepos/<organization>/<project>/<repo> 的 URL 時，您將能夠讀取、搜尋存放庫中的檔案，並將您的變更提交至 Azure Repos。您可以提取、提取和同步變更，以及檢視分支。

您可以透過在 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 的更多資訊。

佈景主題

您可以透過 VS Code 網頁版，透過 URL 結構描述共用和體驗色彩佈景主題：https://vscode.dev/editor/theme/<extensionId>。

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

注意：色彩佈景主題 URL 結構描述適用於完全宣告式 (無程式碼) 的佈景主題。

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

作為佈景主題作者，您可以將下列徽章新增至擴充功能讀我檔案，讓使用者可以輕鬆地在 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 存放庫擴充功能可讓您輕鬆地在本機複製存放庫、在桌面上重新開啟它，或為目前的存放庫建立 GitHub Codespace (如果您已安裝 GitHub Codespaces 擴充功能並具有建立 GitHub Codespaces 的存取權)。若要執行此操作，請使用從命令面板 (F1) 提供的 [繼續在...上工作] 命令，或按一下狀態列中的遠端指示器。

儲存和共用工作

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

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

您也可以透過繼續在...上工作，繼續在其他環境中工作。

當您第一次將 [繼續在...上工作] 與未提交的變更搭配使用時，您可以選擇使用 [雲端變更] 將您的編輯內容帶到您選取的開發環境，這會使用 VS Code 服務來儲存您擱置中的變更。GitHub 存放庫文件中進一步描述了這一點。

使用您自己的運算執行個體與遠端通道

您可以使用 遠端 - 通道 擴充功能，在 VS Code 網頁版中針對另一部機器進行開發。

遠端 - 通道擴充功能可讓您透過安全通道連線到遠端機器，例如桌上型電腦或虛擬機器 (VM)。然後，您可以從任何地方安全地連線到該機器，而無需 SSH 的要求。這可讓您將「您自己的運算」帶到 vscode.dev，從而啟用其他情境，例如在瀏覽器中執行您的程式碼。

您可以在其文件中深入了解遠端 - 通道。

安全探索

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

從遠端存放庫存取程式碼時，網頁編輯器不會「複製」存放庫，而是透過直接從您的瀏覽器調用服務的 API 來載入程式碼；這進一步降低了複製不受信任的存放庫時的攻擊面。

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

隨處執行

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

語言支援

網頁上的語言支援更細緻，包括程式碼編輯、導覽和瀏覽。桌面體驗通常由語言服務和編譯器提供技術支援，這些服務和編譯器需要檔案系統、執行階段和運算環境。在瀏覽器中，這些體驗由在瀏覽器中執行的語言服務提供技術支援，這些服務提供原始碼符號化和語法色彩化、完成和許多單一檔案作業。

一般而言，體驗分為以下幾類

• 良好：對於大多數程式設計語言，VS Code 網頁版為您提供程式碼語法色彩化、基於文字的完成和括號配對色彩化。透過 Tree-sitter 語法樹狀結構，透過 anycode 擴充功能，我們能夠為 C/C++、C#、Java、PHP、Rust 和 Go 等熱門語言提供其他體驗，例如 [大綱/前往符號] 和 [符號搜尋]。
• 更好：TypeScript、JavaScript 和 Python 體驗都由在本機瀏覽器中執行的語言服務提供技術支援。使用這些程式設計語言，您將獲得「良好」體驗，以及豐富的單一檔案完成、語意醒目提示、語法錯誤等等。
• 最佳：對於許多「網頁」語言 (例如 JSON、HTML、CSS 和 LESS 等)，vscode.dev 中的程式碼撰寫體驗幾乎與桌面版相同 (包括 Markdown 預覽！)。

您可以透過狀態列中的語言狀態指示器，判斷目前檔案中的語言支援層級

限制

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

擴充功能

只有一部分擴充功能可以在瀏覽器中執行。您可以使用擴充功能檢視在網頁中安裝擴充功能，而無法安裝的擴充功能將具有警告圖示和 [了解原因] 連結。我們預期隨著時間的推移，會有更多擴充功能啟用。

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

當擴充功能套件包含在瀏覽器沙箱中無法執行的擴充功能時，您會收到一則資訊訊息，其中包含查看套件中包含的擴充功能的選項。

當擴充功能在瀏覽器沙箱中執行時，它們會受到更多限制。純粹宣告式的擴充功能 (例如大多數佈景主題、程式碼片段或文法) 可以未經修改地執行，並且可以在 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，您就可以在他們的 發行注意事項中檢閱 [瀏覽器版本] 區段。

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

您可以採取其他步驟來改善使用 VS Code 網頁版的瀏覽器體驗。檢閱其他瀏覽器設定區段以取得更多資訊。

行動裝置支援

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

鍵盤快速鍵

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

其他瀏覽器設定

當您在瀏覽器中使用 VS Code 時，可以採取其他瀏覽器組態步驟。

開啟新索引標籤和視窗

在某些情況下，您可能需要在 VS Code 網頁版中工作時開啟新的索引標籤或視窗。VS Code 可能會要求您在從剪貼簿讀取時授與存取權限。根據您的瀏覽器，您可能會授與剪貼簿的存取權限，或以不同的方式允許彈出式視窗

• Chrome、Edge、Firefox：在瀏覽器的設定中搜尋「網站權限」，或在網址列右側尋找下列選項

• Safari：在 Safari 瀏覽器中，前往 [偏好設定...] > [網站] > [彈出式視窗] > 您正在存取的網域 (例如，vscode.dev)，然後從下拉式選單中選取 [允許]。