Visual Studio Code for the Web

Visual Studio Code for the Web 提供免費、無需安裝的 Microsoft Visual Studio Code 體驗，完全在您的瀏覽器中執行，讓您可以快速安全地瀏覽原始碼倉庫並進行輕量級程式碼修改。要開始，請在瀏覽器中訪問 https://vscode.dev。

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

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

以下影片快速概述了 Visual Studio Code for the Web。

與 VS Code 桌面版的關聯

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

準備切換時，您可以通過幾次點選，“升級”到完整的 VS Code 體驗。

您還可以透過選擇齒輪圖示，然後選擇“**切換到 Insiders 版本...**”，或者直接導航到 https://insiders.vscode.dev，在 VS Code for the Web 的穩定版和 Insiders 版本之間切換。

開啟專案

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

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

GitHub 倉庫

您可以透過 URL 直接在 VS Code for the Web 中開啟 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...**”命令開啟倉庫。

您還可以透過安裝 vscode.dev 的 Chrome 和 Edge 擴充套件，在瀏覽器的位址列（也稱為 omnibox）中開啟 GitHub 倉庫。然後，鍵入 code 啟用 omnibox，然後是您的倉庫名稱。建議會根據您的瀏覽器搜尋歷史記錄填充，如果所需的倉庫未出現，您也可以鍵入完整的 <owner>/<repo> 名稱來開啟它，例如 microsoft/vscode。

如果您已在 VS Code for the Web（https://vscode.dev）中，您還可以透過 Remote Repositories 擴充套件命令導航到不同的倉庫。選擇狀態列左下角的遠端指示器，您將看到“**開啟遠端倉庫...**”命令。

Azure Repos

您可以像在 GitHub 倉庫一樣，在 VS Code for the Web 中開啟 Azure Repos。

當您導航到具有 https://vscode.dev/azurerepos/<organization>/<project>/<repo> 模式的 URL 時，您將能夠讀取、搜尋倉庫中的檔案，並將您的更改提交到 Azure Repos。您可以獲取、拉取和同步更改，並檢視分支。

您可以透過在 Azure Repos URL 前新增 vscode.dev，在 VS Code for the Web 中開啟 Azure Repos 的任何倉庫、分支或標籤。

或者，當您在一個 Azure DevOps 倉庫或拉取請求頁面時，可以按（.）在 VS Code for the Web 中開啟它。

更多自定義 URL

與桌面版一樣，您可以自定義 VS Code for the Web，透過豐富的擴充套件生態系統支援幾乎所有的後端、語言和服務。vscode.dev 包含提供常用體驗快捷方式的 URL。

我們已經探索了幾個 URL（vscode.dev/github 和 vscode.dev/azurerepos）。這是一個更完整的列表

請注意，某些 URL 必須以特定方式輸入（例如，vscode.dev/editor/liveshare 需要一個活動的 Live Share 會話）。請查閱每個服務的文件以獲取特定的訪問和使用資訊。

下面提供了其中一些 URL 的更多資訊。

主題

您可以透過 URL 模式在 VS Code for the Web 中共享和體驗顏色主題：https://vscode.dev/editor/theme/<extensionId>。

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

注意：顏色主題 URL 模式適用於完全宣告性的主題（無程式碼）。

一個擴充套件可以定義多個主題。您可以使用模式 /editor/theme/<extensionId>/<themeName>。如果未指定 themeName，VS Code for the Web 將選擇第一個主題。

作為主題作者，您可以將以下徽章新增到擴充套件的 README 中，以便使用者可以在 VS Code for the Web 中輕鬆試用您的主題（將 <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 Codespaces）。為此，請使用命令面板（F1）中的“**繼續處理...**”命令，或單擊狀態列中的遠端指示器。

儲存和共享工作

當在 Web 中處理本地檔案時，如果啟用了 自動儲存，您的工作將自動儲存。您也可以手動儲存，就像在桌面 VS Code 中一樣（例如，**檔案** > **儲存**）。

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

您還可以透過 繼續處理 在其他環境中繼續工作。

當您第一次使用“**繼續處理**”但有未提交的更改時，您將可以選擇使用“**雲更改**”（它使用 VS Code 服務來儲存您的待定更改）將您的編輯帶到您選擇的開發環境中。這在 GitHub Repositories 文件中有更詳細的描述。

使用遠端隧道連線（Remote Tunnels）使用您自己的計算例項

您可以使用 Remote - Tunnels 擴充套件在 VS Code for the Web 中針對其他機器進行開發。

Remote - Tunnels 擴充套件允許您透過安全隧道連線到遠端機器，如臺式 PC 或虛擬機器（VM）。然後，您可以從任何地方安全地連線到該機器，而無需 SSH。這使您可以將“自己的計算”帶到 vscode.dev，從而實現更多場景，例如在瀏覽器中執行程式碼。

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

安全探索

VS Code for the Web 完全在您的網路瀏覽器沙箱中執行，並提供一個非常有限的執行環境。

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

處理本地檔案時，VS Code for the Web 會透過您的瀏覽器檔案系統訪問 API 載入它們，這限制了瀏覽器可以訪問的範圍。

隨處執行

與 GitHub Codespaces 類似，VS Code for the Web 可以在平板電腦（如 iPad）上執行。

語言支援

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

通常，體驗分為以下幾類

• 良好： 對於大多數程式語言，VS Code for the Web 提供程式碼語法著色、基於文字的完成和括號對顏色。透過 anycode 擴充套件 使用 Tree-sitter 語法樹，我們能夠為 C/C++、C#、Java、PHP、Rust 和 Go 等流行語言提供其他體驗，例如“**大綱/跳轉到符號**”和“**符號搜尋**”。
• 更好： TypeScript、JavaScript 和 Python 體驗都由在瀏覽器中本地執行的語言服務提供支援。對於這些程式語言，您將獲得“**良好**”體驗，以及豐富的單檔案完成、語義高亮、語法錯誤等。
• 最佳： 對於許多“Web”語言，如 JSON、HTML、CSS 和 LESS 等，vscode.dev 中的編碼體驗幾乎與桌面版相同（包括 Markdown 預覽！）。

您可以透過狀態列中的語言狀態指示器確定當前檔案中語言支援的級別

限制

由於 VS Code for the Web 完全在瀏覽器中執行，因此某些體驗自然會比桌面應用程式受到更多限制。例如，終端和偵錯程式不可用，這很合理，因為您無法在瀏覽器沙箱中編譯、執行和除錯 Rust 或 Go 應用程式。

擴充套件

只有一部分擴充套件可以在瀏覽器中執行。您可以使用擴充套件檢視在 Web 中安裝擴充套件，對於無法安裝的擴充套件將顯示警告圖示和“**瞭解原因**”連結。我們預計未來會有更多擴充套件可用。

安裝擴充套件時，它會儲存在瀏覽器的本地儲存中。您可以透過啟用 設定同步，來確保您的擴充套件在 VS Code 例項之間同步，包括不同的瀏覽器甚至桌面版。

當擴充套件包包含無法在瀏覽器沙箱中執行的擴充套件時，您將收到一條資訊提示，並可以選擇檢視包中包含的擴充套件。

當擴充套件在瀏覽器沙箱中執行時，它們會受到更多限制。純宣告性擴充套件（如大多數主題、程式碼片段或語法）可以未經修改地執行，並且可以在 VS Code for the Web 中使用，而無需擴充套件作者進行任何修改。執行程式碼的擴充套件需要更新才能支援在瀏覽器沙箱中執行。您可以在 Web 擴充套件作者指南 中瞭解支援擴充套件在瀏覽器中執行的更多資訊。

還有一些擴充套件在瀏覽器中支援有限。一個很好的例子是語言擴充套件，它將其支援限制為單個檔案或當前開啟的檔案。

檔案系統 API

Edge 和 Chrome 目前支援 File System API，允許網頁訪問本地檔案系統。如果您的瀏覽器不支援 File System API，則無法開啟本地資料夾，但可以開啟檔案。

瀏覽器支援

您可以在最新版本的 Chrome、Edge、Firefox 和 Safari 中使用 VS Code for the Web。舊版本的每個瀏覽器可能無法正常工作 - 我們僅保證支援最新版本。

提示： 檢查相容瀏覽器版本的一種方法是檢視當前用於測試 VS Code 的 Playwright 版本，並檢視其支援的瀏覽器版本。您可以在 VS Code 倉庫的 package.json 檔案中的 devDependencies/@playwright/test 處找到當前使用的 Playwright 版本。一旦您知道 Playwright 版本（例如 1.37），就可以檢視其 發行說明 中的“**瀏覽器版本**”部分。

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

您還可以採取其他措施來改進使用 VS Code for the Web 的瀏覽器體驗。請參閱 其他瀏覽器設定 部分了解更多資訊。

移動支援

您可以在移動裝置上使用 VS Code for the Web，但螢幕較小可能存在某些限制。

鍵盤快捷鍵

某些鍵盤快捷鍵在 Web 上也可能工作方式不同。

其他瀏覽器設定

在使用 VS Code 的瀏覽器中，您還可以採取其他瀏覽器配置步驟。

開啟新選項卡和視窗

在某些情況下，您可能需要在 VS Code for the Web 中工作時開啟新選項卡或視窗。VS Code 在讀取剪貼簿時可能會請求您允許訪問剪貼簿。根據您的瀏覽器，您可能需要授予訪問剪貼簿的許可權，或者以其他方式允許彈出視窗。

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

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