微軟釋出 vscode.dev，把 VS Code 帶入瀏覽器

原作者：Chris Dias
翻譯：韓老師 + Google Translate

早在 2019 年，當.dev頂級域名開放時，我們趕緊註冊了vscode.dev。像許多購買.dev域名的人一樣，我們不知道我們將用它做啥。反正，也佔個坑吧！

將 VS Code 帶入瀏覽器

直到今天，當你轉到 https://vscode.dev 時，你將看到一個完全在瀏覽器中執行的輕量級 VS Code。在本地機器上開啟一個資料夾並開始編碼。

無需任何的安裝。如絲般順滑。

隨著 vscode.dev 的出現，我們最終實現了我們最初的願景，即構建一個可以在瀏覽器中完全無伺服器執行的開發工具。

那麼，我們可以在 VS Code for the Web 上做什麼呢？

使用雲工具進行本地開發

支援檔案系統訪問 API（目前的 Edge 和 Chrome）的現代瀏覽器允許網頁訪問本地檔案系統（在你的許可下）。這個簡單的本地機器閘道器，快速開啟了一些使用 VS Code for the Web 作為零安裝本地開發工具的有趣場景，例如：

本地檔案檢視和編輯。在 Markdown 中快速記筆記（和預覽！）。即使你在無法安裝完整 VS Code 的受限機器上，仍然可以使用 vscode.dev 檢視和編輯本地檔案。
結合瀏覽器工具構建客戶端 HTML、JavaScript 和 CSS 應用程式以進行除錯。
在 Chromebook 等低功率機器上編輯程式碼，因為你無法（或者說“輕鬆地”）在 Chromebook 安裝 VS Code。
在 iPad 上開發。你可以上傳/下載檔案（甚至使用 Files 應用程式將它們儲存在雲中），以及使用內建的 GitHub 儲存庫擴充套件遠端開啟儲存庫。

而且，如果你的瀏覽器不支援本地檔案系統 API，仍然可以通過瀏覽器上傳和下載單個檔案來開啟它們。

輕量級體驗

由於 VS Code for the Web 完全在瀏覽器中執行，因此與你在桌面應用程式中可以執行的操作相比，某些體驗自然會受到更多限制。例如，終端和偵錯程式不可用。這是有道理的，因為你無法在瀏覽器沙箱中編譯、執行和除錯 Rust 或 Go 應用程式（儘管 Pyodide 和 Web 容器等新興技術有一天可能會改變這一點）。

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

因此，在瀏覽器中時，體驗通常分為以下幾類：

好：對於大多數程式語言，vscode.dev 為你提供程式碼語法著色、基於文字的完成和括號對著色。使用Tree-sitter語法樹，我們能夠為流行語言（如 C/C++、C#、Java、PHP、Rust 和 Go）提供額外的體驗，例如大綱/轉到符號和符號搜尋。

更好：TypeScript、JavaScript 和 Python 體驗都由在瀏覽器中本地執行的語言服務提供支援。使用這些程式語言，你將獲得“良好”體驗以及豐富的單檔案補全、語義突出顯示、語法錯誤等。

最好：對於許多“webby”語言，例如 JSON、HTML、CSS 和 LESS，vscode.dev 中的編碼體驗幾乎與桌面相同（包括 Markdown 預覽！）。

擴充

大多數 UI 自定義擴充套件（例如主題、鍵對映和程式碼段）都可以在 vscode.dev 中使用，你甚至可以通過 Settings Sync 在瀏覽器、桌面和 GitHub 程式碼空間之間啟用漫遊。

使用了作業系統模組的 Node.js 程式碼的擴充套件，或者執行了可執行檔案的擴充套件，仍然會顯示在擴充套件搜尋結果中，但被明確標記為不可用。

也就是說，越來越多的擴充套件已經更新到可以在瀏覽器中使用，而且每天都有更多的擴充套件。

注意：如果你是擴充套件作者並希望在瀏覽器中使用你的擴充套件，請檢視我們的Web 擴充套件創作指南。https://code.visualstudio.com...

例如，Luna Paint - Image Editor 擴充套件允許你直接在 VS Code 中編輯光柵影像。該擴充套件為 VS Code 帶來了豐富的設計工具（例如圖層和混合工具），當然你也可以將影像儲存到本地磁碟。

在 GitHub Issue Notebooks 帶來了 GitHub Issues 的 Notebook 體驗。有了它，你可以將查詢、結果，甚至描述查詢目的的 Markdown 混合到一個編輯器中。

GitHub

VS Code 的許多擴充套件都基於 GitHub。例如，CodeTour擴充套件允許你建立程式碼庫的指導性演練，而WikiLens擴充套件將 VS Code 和你的儲存庫變成一個強大的筆記工具（具有雙向連結）。為了方便訪問 GitHub 中的程式碼，VS Code for the Web 內建了GitHub Repositories、Codespaces和Pull Request擴充套件。你可以進行快速編輯、審查 PR，並繼續進行本地克隆。如果你想要更強大的語言體驗或需要在合併提交之前構建、執行和測試更改，你可以使用 GitHub Codespace 來獲得更強的開發體驗，

哇噻，聽起來很像github.dev不是嗎？為什麼是兩個呢？？！！

真是個好問題呀！

github.dev是深度整合到 GitHub 中的 Web 版 VS Code 定製例項。登入是自動的，URL格式如下github.com的/organization/repo模式，使你可以簡單地改變.com到.dev以編輯程式碼。

除了 GitHub 上的儲存庫，VS Code for the Web 還支援 Azure Repos（Azure DevOps 的一部分）。為了同時使用這兩者，VS Code for the Web 支援兩種路由，vscode.dev/github以及vscode.dev/azurerepos. 不過，你不必記住這一點，只需在你擁有的任何 URL 前面加上“vscode.dev”，就行了！

例如，更改https://github.com/microsoft/...為：

https://vscode.dev/github.com/Microsoft/vscode

對於 Azure Repos，執行相同操作。更改https://dev.azure.com/…為：

https://vscode.dev/dev.azure.com/…

今天，對 Azure Repos 的支援處於讀取儲存庫的預覽模式，但我們正在努力盡快提供完整的讀/寫功能。

如果你不在 GitHub 或 Azure DevOps 上，則可以通過擴充套件提供對其他儲存庫託管服務的支援，就像在桌面上一樣。如上所述，這些擴充套件需要支援在瀏覽器中完全執行。

再聊聊 URL

就像在桌面上一樣，您可以通過支援幾乎所有後端、語言和服務的豐富擴充套件生態系統，來定製 VS Code for the Web。不像在桌面上，很容易讓我們能夠提供自定義體驗與通過獨特的預安裝的擴充套件程式vscode.dev的網址（例如vscode.dev/github和vscode.dev/azurerepos）。

例如，嘗試瀏覽到 vscode.dev/theme/sdras.。

在這裡你可以直接體驗 @sarah_edo 的夜貓子顏色主題。無需安裝！如果您是主題作者，你甚至可以在 README 中建立一個徽章，讓使用者直接從 Marketplace 試用你的主題（在 VS Code for the Web 使用者指南中瞭解更多資訊：https://code.visualstudio.com...）。