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 存放庫：開啟存放庫...] 命令開啟存放庫。

您也可以透過瀏覽器的搜尋列 (又名 omnibox) 在 vscode.dev 中開啟 GitHub 存放庫，方法是安裝適用於 Chrome 和 Edge 的 vscode.dev 擴充功能。然後，輸入 code 以啟動 omnibox，後面接著您的存放庫名稱。建議會由您的瀏覽器搜尋歷程記錄填入，因此如果您想要的存放庫未出現，您也可以輸入完整合格的 <owner>/<repo> 名稱來開啟它，例如 microsoft/vscode。

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

Azure Repos

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

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

您可以將 vscode.dev 加到 Azure Repos URL 的前面，在 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 codespace 的存取權)。若要執行此動作，請使用 [命令面板] (F1) 中提供的 [繼續在...上工作] 命令，或按一下狀態列中的 [遠端] 指示器。

儲存與共用工作

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

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

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

當您第一次搭配未提交的變更使用 [繼續在...上工作] 時，您將有選項可以使用 [雲端變更] 將您的編輯帶到您選取的開發環境，這會使用 VS Code 服務來儲存您擱置中的變更。這在 GitHub 存放庫 文件中有更詳細的說明。

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

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

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

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

安全探索

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

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

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

隨處執行

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

語言支援

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

一般而言，體驗分為下列類別

• 良好：對於大多數程式設計語言，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 的 Playright 版本，並檢閱其支援的瀏覽器版本。您可以在 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)，然後從下拉式選單中選取 [允許]。