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 的推出，我們終於開始實現最初的願景，即構建一個可以在瀏覽器中完全無伺服器執行的開發工具。要了解完整的歷史，請觀看 Erich Gamma 在 VS Code Day 上的演講 “VS Code 並非一蹴而就...歷經10年”。
那麼，你可以在 Web 版 VS Code 上做些什麼呢？實際上相當多……
使用雲工具進行本地開發
支援檔案系統訪問 API（目前是 Edge 和 Chrome）的現代瀏覽器允許網頁訪問本地檔案系統（需要你的許可）。這個通往本地機器的簡單通道迅速為將 Web 版 VS Code 用作零安裝本地開發工具開闢了一些有趣的場景，例如
- 本地檔案檢視和編輯。快速使用 Markdown 記筆記（並預覽！）。即使你在一個受限的機器上無法安裝完整的 VS Code，你仍然可以使用 vscode.dev 來檢視和編輯本地檔案。
- 結合瀏覽器工具進行除錯，構建客戶端 HTML、JavaScript 和 CSS 應用程式。
- 在 Chromebook 等低功耗機器上編輯程式碼，這些機器上無法（輕鬆）安裝 VS Code。
- 在 iPad 上開發。你可以上傳/下載檔案（甚至使用“檔案”應用將它們儲存在雲端），還可以使用內建的 GitHub Repositories 擴充套件遠端開啟倉庫。
而且，如果你的瀏覽器不支援本地檔案系統 API，你仍然可以透過瀏覽器上傳和下載單個檔案來開啟它們。
輕量級體驗
由於 Web 版 VS Code 完全在瀏覽器內執行，因此與桌面應用相比，某些體驗自然會受到更多限制。例如，終端和偵錯程式不可用，這是有道理的，因為你無法在瀏覽器沙箱內編譯、執行和除錯 Rust 或 Go 應用程式（儘管像 Pyodide 和 web containers 這樣的新興技術有一天可能會改變這一點）。
更微妙的是程式碼編輯、導航和瀏覽體驗，在桌面上，這些體驗通常由需要檔案系統、執行時和計算環境的語言服務和編譯器提供支援。在瀏覽器中，這些體驗由完全在瀏覽器中執行（無檔案系統、無執行時）的語言服務提供支援，這些服務提供原始碼標記化和語法著色、補全以及許多單檔案操作。
因此，在瀏覽器中，體驗通常分為以下幾類
良好：對於大多數程式語言，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 之間啟用漫遊。
執行 Node.js 程式碼、使用特定於作業系統的模組或呼叫本地可執行檔案的擴充套件程式仍然會顯示在搜尋結果中，但會明確標記為不可用。
話雖如此，越來越多的擴充套件程式已更新為可以在瀏覽器中執行，並且每天都有更多擴充套件程式加入。
注意：如果你是擴充套件程式作者並希望你的擴充套件程式在瀏覽器中可用（我們非常希望！），請檢視我們的Web 擴充套件程式創作指南。
例如，Luna Paint - Image Editor 擴充套件允許你直接在 VS Code 中編輯柵格影像。該擴充套件將豐富的繪圖工具（例如圖層和混合工具）帶到了 VS Code 中，當然你也可以將影像儲存到本地磁碟。
GitHub Issue Notebooks 擴充套件將 Notebook 體驗帶入了 GitHub Issues。有了它，你可以將查詢、結果甚至描述查詢用途的 Markdown 混合在一個編輯器中。
GitHub
許多 VS Code 擴充套件程式都適用於儲存在 GitHub 中的原始碼。例如，CodeTour 擴充套件允許你建立程式碼庫的引導式演練，而 WikiLens 擴充套件將 VS Code 和你的倉庫變成了一個強大的筆記工具（具有雙向連結）。為了方便訪問 GitHub 中的程式碼，Web 版 VS Code 內建了 GitHub Repositories、Codespaces 和 Pull Request 擴充套件。你可以進行快速編輯、審查 PR，並繼續到本地克隆，或者更好的是，繼續到 GitHub 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。
在這裡，你可以“即時”體驗 @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將傳遞給擴充套件程式，以使加入體驗無縫銜接。
vscode.dev URL 的可能性是無限的，我們有很多想法迫不及待想在未來幾個月與大家分享。
下一步去哪裡？
將 VS Code 帶入瀏覽器是該產品最初願景的實現。它也是一個全新願景的開始。一個只要有瀏覽器和網際網路連線就可以使用的臨時編輯器，是未來我們真正可以在任何地方編輯任何東西的基礎。
敬請期待更多精彩內容…… 😉
程式設計愉快，
Chris
附註：如果你錯過了，可以觀看我們的Web 版 VS Code直播。