🚀 在 VS Code 中取得！

vscode.dev(!)

2021 年 10 月 20 日，作者：Chris Dias，@chrisdias

回到 2019 年，當 .dev 頂級網域開放時，我們買下了 vscode.dev 並迅速將其停放，指向我們的網站 code.visualstudio.com（或者，如果您像我一樣來自波士頓地區，我們會「pahked it」）。 就像許多購買 .dev 網域的人一樣，我們不知道要用它做什麼。 而且我們當然沒有預料到，它最終會實現醞釀了十多年的使命。

將 VS Code 帶到瀏覽器

快轉到今天。現在當您前往 https://vscode.dev 時，您將看到在瀏覽器中完全運行的輕量版 VS Code。 開啟您本機電腦上的資料夾並開始編碼。

無需安裝。

vscode.dev running in the browser

隨著 vscode.dev 的推出，我們開始最終實現我們最初的願景，即建構一個可以在瀏覽器中完全以無伺服器方式運行的開發工具。 如需完整的歷史課程，請查看 Erich Gamma 的 VS Code Day 演講 「VS Code 一夜成名…醞釀了 10 年」。

那麼，您可以在 Web 版 VS Code 上做些什麼呢？ 實際上相當多……

使用雲端工具進行本機開發

"The Cat said No" application source code in vscode.dev

支援 File System Access API 的現代瀏覽器（目前為 Edge 和 Chrome）允許網頁存取本機檔案系統（在您允許的情況下）。 這個通往本機電腦的簡單閘道快速開啟了一些有趣的案例，可將 Web 版 VS Code 用作零安裝本機開發工具，例如

  • 本機檔案檢視和編輯。 在 Markdown 中快速記筆記（和預覽！）。 即使您在無法安裝完整版 VS Code 的受限電腦上，您仍然可以使用 vscode.dev 來檢視和編輯本機檔案。
  • 結合瀏覽器工具進行偵錯，建構用戶端 HTML、JavaScript 和 CSS 應用程式。
  • 在 Chromebook 等效能較低的電腦上編輯您的程式碼，在這些電腦上您無法 (輕鬆地) 安裝 VS Code。
  • 在您的 iPad 上開發。 您可以上傳/下載檔案（甚至使用「檔案」應用程式將它們儲存在雲端），以及使用內建的 GitHub Repositories 擴充功能遠端開啟儲存庫。

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

Local File System Access is Unsupported message dialog

更輕量級的體驗

由於 Web 版 VS Code 完全在瀏覽器中運行，因此與您在桌面應用程式中可以執行的操作相比，某些體驗自然會受到更多限制。 例如，終端機和偵錯工具不可用，這是合理的，因為您無法在瀏覽器沙箱中編譯、運行和偵錯 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 中運作，您甚至可以透過 設定同步 在瀏覽器、桌面和 GitHub Codespaces 之間啟用漫遊。

運行 Node.js 程式碼、使用特定於作業系統的模組或調用本機可執行檔的擴充功能仍然會顯示在搜尋結果中，但會清楚地標記為不可用。

Notification that extension is not available in Visual Studio Code for the Web

也就是說，越來越多的擴充功能已更新為可在瀏覽器中運作，而且每天都有更多擴充功能推出。

注意：如果您是擴充功能作者，並且希望您的擴充功能在瀏覽器中可用（我們確實希望！），請查看我們的 Web 擴充功能撰寫指南。

例如，Luna Paint - 影像編輯器 擴充功能可讓您直接在 VS Code 中編輯點陣圖影像。 此擴充功能為 VS Code 帶來豐富的設計工具（例如，圖層和混合工具），當然，您可以將影像儲存到本機磁碟。

Luna Paint - Image Editor extension running in vscode.dev

GitHub Issue Notebooks 擴充功能將 Notebook 體驗帶入 GitHub Issues。 透過該功能，您可以將查詢、結果，甚至描述查詢目的的 Markdown 交錯到單一編輯器中。

GitHub Issue Notebooks extension running in vscode.dev

GitHub

適用於 VS Code 的許多擴充功能都適用於儲存在 GitHub 中的原始程式碼。 例如，CodeTour 擴充功能可讓您建立程式碼庫的導覽，而 WikiLens 擴充功能可將 VS Code 和您的儲存庫變成功能強大的筆記工具（具有雙向連結）。 為了讓您輕鬆存取 GitHub 中的程式碼，Web 版 VS Code 隨附內建的 GitHub Repositories、Codespaces 和 Pull Request 擴充功能。 您可以進行快速編輯、檢閱 PR，並繼續到本機複製，甚至更好，到 GitHub Codespace，如果您想要更強大的語言體驗，或需要在合併提交之前建置、運行和測試變更。

Continue on dropdown showing Clone Repository Locally or Create New Codespace

哇，聽起來很像 github.dev，不是嗎？ 它們不同嗎？ 相同嗎？ 為什麼有兩個？？！！

好問題！ github.dev 是 Web 版 VS Code 的自訂執行個體，它與 GitHub 深度整合。 登入是自動的，URL 格式遵循 github.com 的 /organization/repo 模型，因此您可以簡單地將 .com 變更為 .dev 來編輯儲存庫，並且它已針對 GitHub 進行自訂，具有淺色和深色佈景主題。

除了 GitHub 上的儲存庫之外，Web 版 VS Code 還支援 Azure Repos（Azure DevOps 的一部分）。 為了同時使用兩者，Web 版 VS Code 支援兩條路徑：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…

與桌面版一樣，您可以透過豐富的擴充功能生態系統自訂 Web 版 VS Code，這些擴充功能支援幾乎所有後端、語言和服務。 與桌面版不同，我們可以透過唯一的 vscode.dev URL（例如上面提到的 vscode.dev/github 和 vscode.dev/azurerepos）輕鬆提供具有預先安裝擴充功能的自訂體驗。

例如，嘗試瀏覽至 https://vscode.dev/theme/sdras.night-owl。

Night Owl color theme in vscode.dev

在這裡，您可以「即時」體驗由 @sarah_edo 開發的熱門 Night Owl 色彩佈景主題，而無需經過下載和安裝過程，即可查看您是否喜歡它。 無需安裝！ 如果您是佈景主題作者，您甚至可以在您的 README.md 中建立一個徽章，讓使用者直接從 Marketplace 試用您的佈景主題（在 Web 版 VS Code 使用者指南中了解更多資訊）。

隨時使用此 URL 與朋友分享您最喜歡的佈景主題。 就我個人而言，我是 @wesbos 的 Cobalt2 佈景主題的忠實粉絲，請查看 https://vscode.dev/theme/wesbos.theme-cobalt2。 請注意，theme URL 僅適用於完全宣告式（無程式碼）的佈景主題。

如您所見，vscode.dev URL 是我們提供新的、輕量級體驗的強大方式。 另一個範例是，Live Share 客戶工作階段也將透過 https://vscode.dev/liveshare URL 在瀏覽器中提供。 sessionId 將傳遞給擴充功能，以使加入體驗無縫銜接。

Live Share dialog with option to join session from the browser

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

接下來往哪裡去？

將 VS Code 帶到瀏覽器是實現產品原始願景的體現。 這也是一個全新願景的開始。 任何擁有瀏覽器和網際網路連線的人都可以使用的臨時編輯器，是我們未來能夠真正隨時隨地編輯任何內容的基礎。

敬請期待更多… 😉

Coding 愉快，

Chris

附註：如果您錯過了，您可以觀看我們的 Web 版 VS Code 直播。