🚀 在 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 體驗都由在本機瀏覽器中執行的語言服務提供支援。使用這些程式設計語言，您將獲得「良好」體驗，以及豐富的單一檔案完成項目、語意醒目提示、語法錯誤等等。

最佳：對於許多「Web 相關」語言，例如 JSON、HTML、CSS 和 LESS，vscode.dev 中的編碼體驗幾乎與桌面版相同 (包括 Markdown 預覽！)。

擴充功能

大多數 UI 自訂擴充功能 (例如佈景主題、按鍵對應和程式碼片段) 都可以在 vscode.dev 中運作，而且您甚至可以透過設定同步在瀏覽器、桌面和 GitHub Codespaces 之間啟用漫遊。

執行使用 OS 特定模組或呼叫本機可執行檔的 Node.js 程式碼的擴充功能仍然會顯示在搜尋結果中，但會清楚標示為無法使用。

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

話雖如此，但有越來越多的擴充功能已更新為可在瀏覽器中運作，而且每天都有更多擴充功能推出。

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

例如，Luna Paint - Image Editor 擴充功能可讓您直接在 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

P.S. 如果您錯過了，您可以觀看我們的適用於 Web 的 VS Code 線上直播。