原作者：Chris Dias

原文：https://code.visualstudio.com/blogs/2021/10/20/vscode-dev

翻譯：韓老師 + 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/api/extension-guides/web-extensions

例如，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/vscode 為：

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/docs/editor/vscode-web#_themes）。

如你所見，vscode.devURL 是我們提供輕量級新體驗的強大方式。另一個示例，是 Live Share 來賓會話，也將通過 https://vscode.dev/liveshareURL 在瀏覽器中可用。在 sessionId 將被傳遞到擴展，使加入的體驗如絲般順滑。

vscode.devURL 的可能性是無窮無盡的，我們很高興在未來幾個月內與你分享更多想法。

未來的路，怎么走？

將 VS Code 引入瀏覽器是對產品最初愿景的實現。這也是一個全新的開始。

任何擁有瀏覽器和互聯網連接的人，都可以使用我們的編輯器。這是未來我們可以真正從任何地方編輯任何內容的基礎。

大家敬請期待！

E?N?D

各位伙伴們好，詹帥本帥假期搭建了一個個人博客和小程序，匯集各種干貨和資源，也方便大家閱讀，感興趣的小伙伴請移步小程序體驗一下哦！（歡迎提建議）

推薦閱讀

牛逼！Python常用數據類型的基本操作（長文系列第①篇）

牛逼！Python的判斷、循環和各種表達式（長文系列第②篇）

牛逼！Python函數和文件操作（長文系列第③篇）

牛逼！Python錯誤、異常和模塊（長文系列第④篇）

總結

以上是生活随笔為你收集整理的重磅！微软发布 vscode.dev，把 VSCode 带入浏览器！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。