網頁版 Visual Studio Code

網頁版 Visual Studio Code 提供了一種免費、零安裝的 Microsoft Visual Studio Code 體驗，它完全在您的瀏覽器中執行，讓您能夠快速、安全地瀏覽原始碼倉庫並進行輕量級的程式碼修改。要開始使用，請在瀏覽器中訪問 https://vscode.dev。

網頁版 VS Code 擁有許多您喜愛的 VS Code 桌面版功能，包括在瀏覽和編輯時的搜尋和語法高亮，以及透過擴充套件支援來處理您的程式碼庫和進行簡單的編輯。除了可以從 GitHub 和 Azure Repos 等原始碼控制提供商那裡開啟倉庫、分支和拉取請求外，您還可以處理儲存在本地計算機上的程式碼。

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

以下影片簡要介紹了網頁版 Visual Studio Code。

與 VS Code 桌面版的關係

網頁版 VS Code 提供了基於瀏覽器的體驗，用於導航檔案和倉庫，以及提交輕量級的程式碼更改。但是，如果您需要訪問執行時來執行、構建或除錯程式碼，或者您想使用終端等平臺功能，又或者您想執行在 Web 上不支援的擴充套件，我們建議您將工作轉移到桌面應用程式、GitHub Codespaces，或使用 Remote - Tunnels 以獲得 VS Code 的全部功能。此外，VS Code 桌面版允許您使用全套不受瀏覽器限制的鍵盤快捷鍵。

當您準備好切換時，只需點選幾下，您就可以“升級”到完整的 VS Code 體驗。

您還可以在網頁版 VS Code 的穩定版和 Insiders 版之間切換，方法是選擇齒輪圖示，然後選擇切換到 Insiders 版本...，或者直接導航到 https://insiders.vscode.dev。

開啟專案

透過訪問 https://vscode.dev，您可以建立一個新的本地檔案或專案，處理現有的本地專案，或者訪問託管在其他地方（如 GitHub 和 Azure Repos（Azure DevOps 的一部分））的原始碼倉庫。

您可以在網頁中建立新的本地檔案，就像在 VS Code 桌面環境中一樣，使用命令面板（F1）中的檔案 > 新建檔案。

GitHub 倉庫

您可以直接透過 URL 在網頁版 VS Code 中開啟一個 GitHub 倉庫，遵循以下格式：https://vscode.dev/github/<organization>/<repo>。以 VS Code 倉庫為例，URL 如下：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。

如果您已經在使用網頁版 VS Code (位於 https://vscode.dev），您也可以透過 Remote Repositories 擴充套件的命令來導航到不同的倉庫。選擇狀態列左下角的遠端指示器，您將看到 Open Remote Repository... 命令。

Azure Repos

您可以像開啟 Github 倉庫一樣，在網頁版 VS Code 中開啟 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 Repositories 擴充套件使您可以輕鬆地在本地克隆倉庫、在桌面上重新開啟它，或為當前倉庫建立一個 GitHub codespace（如果您已安裝 GitHub Codespaces 擴充套件並有許可權建立 GitHub codespace）。為此，請使用命令面板（F1）中的 Continue Working On... 命令，或點選狀態列中的遠端指示器。

儲存和分享工作

當在網頁中處理本地檔案時，如果您啟用了自動儲存，您的工作會自動儲存。您也可以像在桌面版 VS Code 中那樣手動儲存（例如檔案 > 儲存）。

在處理遠端倉庫時，您的工作會儲存在瀏覽器的本地儲存中，直到您提交它。如果您使用 GitHub Repositories 打開了一個倉庫或拉取請求，您可以在原始碼管理檢視中推送您的更改，以持久化任何新的工作。

您還可以透過 Continue Working On 在其他環境中繼續工作。

當您首次使用帶有未提交更改的 Continue Working On 時，您可以選擇使用 Cloud Changes 將您的編輯帶到您選擇的開發環境中，它使用 VS Code 服務來儲存您待處理的更改。這在 GitHub Repositories 文件中有進一步的描述。

使用您自己的計算例項與遠端隧道

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

Remote - Tunnels 擴充套件讓您可以透過安全隧道連線到遠端機器，如臺式電腦或虛擬機器 (VM)。然後，您可以從任何地方安全地連線到該機器，而無需 SSH。這讓您可以“自帶算力”到 vscode.dev，從而支援在瀏覽器中執行程式碼等額外場景。

您可以在其文件中瞭解有關 Remote - Tunnels 的更多資訊。

安全探索

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

當訪問遠端倉庫的程式碼時，Web 編輯器不會“克隆”倉庫，而是透過直接從您的瀏覽器呼叫服務的 API 來載入程式碼；這在克隆不受信任的倉庫時進一步減少了攻擊面。

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

隨處執行

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

語言支援

在 Web 上，語言支援的情況稍微複雜一些，包括程式碼編輯、導航和瀏覽。桌面體驗通常由期望有檔案系統、執行時和計算環境的語言服務和編譯器提供支援。在瀏覽器中，這些體驗由在瀏覽器中執行的語言服務提供支援，這些服務提供原始碼的標記化和語法著色、補全以及許多單檔案操作。

通常，體驗分為以下幾類

• 良好：對於大多數程式語言，網頁版 VS Code 為您提供程式碼語法著色、基於文字的補全和括號對著色。透過 anycode 擴充套件使用 Tree-sitter 語法樹，我們能夠為 C/C++、C#、Java、PHP、Rust 和 Go 等流行語言提供額外的體驗，如大綱/轉到符號和符號搜尋。
• 更好：TypeScript、JavaScript 和 Python 的體驗都由在瀏覽器中本地執行的語言服務提供支援。對於這些程式語言，您將獲得“良好”體驗，外加豐富的單檔案補全、語義高亮、語法錯誤等等。
• 最佳：對於許多“Web”語言，如 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 檔案中找到當前使用的 Playwright 版本，位於 devDependencies/@playwright/test。一旦您知道了 Playwright 的版本，例如 1.37，您就可以在他們的發行說明中檢視瀏覽器版本部分。

在 Firefox 和 Safari 中，Webview 可能會顯示不同或出現一些意外行為。您可以在 VS Code GitHub 倉庫中檢視問題查詢，以跟蹤與特定瀏覽器相關的問題，例如使用 Safari 標籤和 Firefox 標籤。

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

移動端支援

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

鍵盤快捷鍵

某些鍵盤快捷鍵在網頁中也可能工作方式不同。

附加瀏覽器設定

在瀏覽器中使用 VS Code 時，您可以採取一些額外的瀏覽器配置步驟。

開啟新標籤頁和視窗

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

• Chrome、Edge、Firefox：在您的瀏覽器設定中搜索“網站許可權”，或在位址列右側查詢以下選項

• Safari：在 Safari 瀏覽器中，轉到偏好設定... > 網站 > 彈出式視窗 > 您正在訪問的域名（例如，vscode.dev），然後從下拉選單中選擇允許。