網頁版 Visual Studio Code
網頁版 Visual Studio Code 提供免安裝、完全在瀏覽器中執行的免費 Microsoft Visual Studio Code 體驗，讓您能夠快速且安全地瀏覽原始碼存放庫，並進行輕量級的程式碼變更。若要開始使用，請在瀏覽器中前往 https://vscode.dev。
網頁版 VS Code 擁有許多您喜愛的桌面版 VS Code 功能，包括瀏覽和編輯時的搜尋與語法醒目提示，以及可讓您處理程式碼庫並進行簡單編輯的擴充功能支援。除了能開啟來自 GitHub 和 Azure Repos 等原始碼控制提供者的存放庫、分叉 (fork) 和提取要求 (PR) 之外，您也可以處理儲存在本機電腦上的程式碼。
網頁版 VS Code 完全在網頁瀏覽器中執行，因此與桌面版體驗相比存在某些限制，您可以在下方閱讀更多相關資訊。
以下影片簡要介紹了網頁版 Visual Studio Code。
與桌面版 VS Code 的關係
網頁版 VS Code 提供基於瀏覽器的體驗，用於導覽檔案和存放庫，並提交輕量級的程式碼變更。但是，如果您需要存取執行階段以執行、建置或偵錯程式碼、想要使用終端機等平台功能，或是想要執行網頁版不支援的擴充功能，我們建議將您的工作移至桌面應用程式、GitHub Codespaces，或是使用 遠端通道 (Remote - Tunnels) 以獲得 VS Code 的完整功能。此外，桌面版 VS Code 可讓您使用不受瀏覽器限制的完整鍵盤快速鍵。
當您準備好切換時，只需點擊幾下即可 「升級」 到完整的 VS Code 體驗。
您也可以透過選擇齒輪圖示，然後選擇 Switch to Insiders Version... (切換到測試版...)，或直接瀏覽至 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 提供，該 URL 由 GitHub Repositories 擴充功能 (屬於更廣泛的 Remote Repositories 擴充功能的一部分) 提供支援。
GitHub Repositories 讓您可以在編輯器內遠端瀏覽和編輯存放庫，而無需將程式碼拉取到本機電腦上。您可以在我們的 GitHub Repositories 指南中了解更多關於該擴充功能及其運作方式的資訊。
注意：GitHub Repositories 擴充功能也適用於桌面版 VS Code，可提供快速的存放庫瀏覽和編輯。安裝擴充功能後，您可以使用 GitHub Repositories: Open Repository... 指令開啟存放庫。
您也可以透過安裝適用於 Chrome 和 Edge 的 vscode.dev 擴充功能，在瀏覽器的搜尋列 (即 omnibox) 中開啟 GitHub 存放庫。然後，輸入 code 來啟動搜尋列，接著輸入您的存放庫名稱。建議內容會根據您的瀏覽器搜尋紀錄自動填入，因此如果您想要的存放庫沒有出現，您也可以輸入完整限定的 <owner>/<repo> 名稱來開啟它，例如 microsoft/vscode。
如果您已經在 https://vscode.dev 的網頁版 VS Code 中，也可以透過 Remote Repositories 擴充功能指令導覽至不同的存放庫。點選狀態列左下角的遠端指標，您將會看到 Open Remote Repository... 指令。
Azure Repos
您可以像開啟 GitHub 存放庫一樣，在網頁版 VS Code 中開啟 Azure Repos。
當您導覽至架構為 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 結構 | 說明文件 |
|---|---|---|
| GitHub | /github/<org>/<repo> |
上方有更多資訊 |
| Azure Repos | /azurerepos/<org>/<project>/<repo> |
上方有更多資訊 |
| Visual Studio Live Share | /editor/liveshare/<sessionId> |
下方有更多資訊 |
| Visual Studio Marketplace | /editor/marketplace/<marketplacePublisher>/<extensionId>/<extensionVersion> |
範例路由 以編輯 此擴充功能 |
| Power Pages | /power/pages |
Power Pages 文件 |
| 設定檔 | /editor/profile/github/<GUID> |
設定檔 (Profiles) 文件 |
| 佈景主題 | /editor/theme/<extensionId> |
下方有更多資訊 |
| MakeCode | /edu/makecode |
MakeCode 文件 |
| VS Code for Education | /edu |
VS Code for Education 登陸頁面 |
| Azure Machine Learning (AML) | /+ms-toolsai.vscode-ai-remote-web |
AML 文件 |
| Azure | /azure |
VS Code for Azure |
請注意，某些 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 將採用第一個佈景主題。
身為佈景主題作者，您可以將以下徽章新增至您的擴充功能讀我檔案 (readme) 中，以便使用者輕鬆在網頁版 VS Code 中試用您的佈景主題 (請將 <extensionId> 替換為您的佈景主題擴充功能的唯一識別碼)。
[](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) 中的 Continue Working On... (繼續工作於...) 指令，或點選狀態列中的遠端指標。
儲存並分享工作內容
在網頁版處理本機檔案時，如果您啟用了 自動儲存 (Auto Save)，您的工作內容將會自動儲存。您也可以像在桌面版 VS Code 中一樣手動儲存 (例如 File > Save)。
在遠端存放庫工作時，您的工作內容會儲存在瀏覽器的本機儲存空間中，直到您提交為止。如果您使用 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 完全在您網頁瀏覽器的沙盒中執行，並提供非常有限的執行環境。
在存取來自遠端存放庫的程式碼時，網頁編輯器並不會「複製」(clone) 該存放庫，而是透過直接從您的瀏覽器叫用服務的 API 來載入程式碼；這進一步減少了複製不信任存放庫時的受攻擊面。
處理本機檔案時，網頁版 VS Code 透過瀏覽器的檔案系統存取 API 載入檔案，這限制了瀏覽器可以存取的範圍。
隨處執行
與 GitHub Codespaces 類似，網頁版 VS Code 可以在 iPad 等平板電腦上執行。
語言支援
語言支援在網頁版上更為細緻，包括程式碼編輯、導覽和瀏覽。桌面版體驗通常由預期有檔案系統、執行階段和運算環境的語言服務與編譯器提供支援。在瀏覽器中，這些體驗由執行於瀏覽器中的語言服務提供，提供原始碼語彙切分 (tokenization) 和語法色彩醒目提示、完成 (completions) 以及許多單一檔案操作。
一般而言，體驗分為以下幾類：
- 良好 (Good)： 對於大多數程式語言，網頁版 VS Code 提供程式碼語法色彩醒目提示、文字式補全和方括號成對醒目提示。透過 anycode 擴充功能 使用 Tree-sitter 語法樹，我們能為 C/C++、C#、Java、PHP、Rust 和 Go 等熱門語言提供額外的體驗，例如 Outline/Go to Symbol (大綱/跳至符號) 和 Symbol Search (符號搜尋)。
- 更好 (Better)： TypeScript、JavaScript 和 Python 的體驗均由原生執行於瀏覽器中的語言服務提供支援。使用這些程式語言，您將獲得「良好」的體驗，再加上豐富的單一檔案補全、語意醒目提示、語法錯誤提示等。
- 最好 (Best)： 對於許多「網頁型」語言，例如 JSON、HTML、CSS 和 LESS 等，vscode.dev 中的編碼體驗與桌面版幾乎相同 (包括 Markdown 預覽！)。
您可以透過狀態列中的語言狀態指示器 (Language Status Indicator) 來確定當前檔案的語言支援級別。
限制
由於網頁版 VS Code 完全在瀏覽器中執行，與桌面應用程式相比，某些體驗自然會受到更多限制。例如，終端機和偵錯器不可用，這是合理的，因為您無法在瀏覽器沙盒中編譯、執行和偵錯 Rust 或 Go 應用程式。
延伸模組
只有一部分擴充功能可以在瀏覽器中執行。您可以使用「擴充功能」檢視在網頁版安裝擴充功能，而無法安裝的擴充功能將顯示警告圖示和 Learn Why (了解原因) 連結。我們預期隨著時間推移，會有更多擴充功能可用。
當您安裝擴充功能時，它會儲存在瀏覽器的本機儲存空間中。您可以透過啟用 設定同步 (Settings Sync)，確保您的擴充功能在不同的 VS Code 執行個體 (包括不同的瀏覽器甚至桌面版) 之間同步。
當擴充功能套件 (Extension Pack) 包含無法在瀏覽器沙盒中執行的擴充功能時，您會收到一則資訊訊息，並可選擇查看該套件中包含的擴充功能。
當擴充功能在瀏覽器沙盒中執行時，它們會受到更多限制。純聲明式擴充功能 (例如大多數佈景主題、程式碼片段或文法規則) 可以不經修改地執行，並且在網頁版 VS Code 中可用，無需擴充功能作者進行任何修改。執行程式碼的擴充功能則需要更新以支援在瀏覽器沙盒中執行。您可以在 網頁擴充功能作者指南 中閱讀更多關於支援瀏覽器擴充功能的相關內容。
也有一些擴充功能在瀏覽器中執行時僅提供部分支援。一個很好的例子是語言擴充功能，它將其 支援限制 在單一檔案或當前開啟的檔案中。
檔案系統 API (File system API)
Edge 和 Chrome 目前支援 File System API，允許網頁存取本機檔案系統。如果您的瀏覽器不支援 File System API，您將無法在本地開啟資料夾，但可以改為開啟單一檔案。
瀏覽器支援
您可以在最新版本的 Chrome、Edge、Firefox 和 Safari 中使用網頁版 VS Code。各瀏覽器的舊版本可能無法運作 —— 我們僅保證支援最新版本。
提示： 檢查相容瀏覽器版本的一種方法是查看目前用於測試 VS Code 的 Playwright 版本，並查看其支援的瀏覽器版本。您可以在 VS Code 存放庫的 package.json 檔案中的
devDependencies/@playwright/test找到目前使用的 Playwright 版本。得知 Playwright 版本後 (例如1.37)，您就可以在他們的 版本資訊 (Release notes) 中查看 Browser Versions 區段。
網頁檢視 (Webview) 在 Firefox 和 Safari 中可能會顯示不同或有一些非預期的行為。您可以在 VS Code GitHub 存放庫中查看問題查詢，以追蹤與特定瀏覽器相關的問題，例如標有 Safari 標籤 和 Firefox 標籤 的問題。
您可以採取額外步驟來改善使用網頁版 VS Code 的瀏覽器體驗。請查看 額外的瀏覽器設定 區段以獲取更多資訊。
行動裝置支援
您可以在行動裝置上使用網頁版 VS Code，但較小的螢幕可能會有某些限制。
鍵盤快速鍵
某些鍵盤快速鍵在網頁版中的運作方式可能也有所不同。
| 問題 | 原因 |
|---|---|
| ⇧⌘P (Windows、Linux Ctrl+Shift+P) 在 Firefox 中無法啟動指令面板。 | ⇧⌘P (Windows、Linux Ctrl+Shift+P) 在 Firefox 中已被預留。 作為解決方法，請使用 F1 啟動指令面板。 |
| ⌘N (Windows、Linux Ctrl+N) 用於新增檔案在網頁版中無效。 | ⌘N (Windows、Linux Ctrl+N) 會改為開啟新視窗。 作為解決方法，您可以使用 Ctrl+Alt+N (macOS 上為 Cmd+Alt+N)。 |
| ⌘W (Windows Ctrl+F4、Linux Ctrl+W) 用於關閉編輯器在網頁版中無效。 | ⌘W (Windows Ctrl+F4、Linux Ctrl+W) 在瀏覽器中會關閉當前分頁。 作為解決方法，您可以使用 Ctrl+Shift+Alt+N (macOS 上為 Cmd+Shift+Alt+N)。 |
| ⇧⌘B (Windows、Linux Ctrl+Shift+B) 在瀏覽器中不會切換我的最愛列。 | 網頁版 VS Code 會覆蓋此項並將其重新導向至指令面板中的「建置」(Build) 選單。 |
| Alt+Left 和 Alt+Right 應在編輯器內導覽，但可能會錯誤地觸發分頁歷史紀錄導覽。 | 如果焦點在編輯器之外，這些快速鍵會改為觸發分頁歷史紀錄導覽。 |
額外的瀏覽器設定
在瀏覽器中使用 VS Code 時，您可以採取額外的瀏覽器配置步驟。
開啟新分頁和視窗
在某些情況下，您在網頁版 VS Code 中工作時可能需要開啟新分頁或視窗。讀取剪貼簿時，VS Code 可能會要求您提供存取權限。根據您的瀏覽器，您可以透過不同的方式授予剪貼簿存取權限，或允許開啟彈出式視窗：
- Chrome、Edge、Firefox：在瀏覽器設定中搜尋「網站權限」，或在網址列右側尋找以下選項。
- Safari：在 Safari 瀏覽器中，前往 偏好設定... > 網站 > 彈出式視窗 > 您正在存取的網域 (例如
vscode.dev)，然後從下拉選單中選擇 允許。