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 的推出，我們終於開始實現最初的願景——構建一個可以在瀏覽器中完全無伺服器（serverless）執行的開發工具。想要了解完整的歷史，請觀看 Erich Gamma 在 VS Code Day 上的演講 “VS Code 的一夜成名……十年磨一劍”。
那麼，你能在網頁版 VS Code 上做什麼呢？其實能做的相當多……
使用雲工具進行本地開發
支援檔案系統訪問 API 的現代瀏覽器（目前是 Edge 和 Chrome）允許網頁訪問本地檔案系統（需要你的許可）。這個通往本地機器的簡單入口，迅速為將網頁版 VS Code 用作零安裝的本地開發工具開啟了一些有趣的場景，例如：
- 本地檔案檢視和編輯。用 Markdown 快速做筆記（並預覽！）。即使你在一個受限制的機器上無法安裝完整的 VS Code，你仍然可以使用 vscode.dev 來檢視和編輯本地檔案。
- 結合瀏覽器除錯工具，構建客戶端的 HTML、JavaScript 和 CSS 應用程式。
- 在效能較低的機器上（如 Chromebook）編輯程式碼，這些裝置上你無法（輕易）安裝 VS Code。
- 在你的 iPad 上進行開發。你可以上傳/下載檔案（甚至可以使用“檔案”應用將它們儲存在雲端），也可以透過內建的 GitHub Repositories 擴充套件遠端開啟倉庫。
而且，如果你的瀏覽器不支援本地檔案系統 API，你仍然可以透過瀏覽器的上傳和下載功能開啟單個檔案。
更輕量級的體驗
由於網頁版 VS Code 完全在瀏覽器內執行，與桌面應用相比，某些體驗自然會受到更多限制。例如，終端和偵錯程式是不可用的，這很合理，因為你無法在瀏覽器沙箱中編譯、執行和除錯 Rust 或 Go 應用程式（儘管像 Pyodide 和 WebAssembly 容器這樣的新興技術未來可能會改變這一點）。
程式碼編輯、導航和瀏覽體驗則更為微妙。在桌面上，這些體驗通常由期望有檔案系統、執行時和計算環境的語言服務和編譯器來驅動。而在瀏覽器中，這些體驗則由*完全在瀏覽器中執行*的語言服務提供（沒有檔案系統，沒有執行時），它們提供原始碼的詞法分析、語法高亮、自動補全以及許多單檔案操作。
因此，在瀏覽器中，體驗通常分為以下幾類：
良好：對於大多數程式語言，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 上的程式碼，網頁版 VS Code 內建了 GitHub Repositories、Codespaces 和Pull Request 擴充套件。你可以進行快速編輯、審查 PR，並繼續到本地克隆，或者更好的選擇是，到一個 GitHub Codespace 中，如果你需要更強大的語言體驗，或者需要在合併提交前構建、執行和測試更改。
哇，聽起來很像 github.dev，不是嗎？它們有區別嗎？是一樣的嗎？為什麼有兩個？
好問題！github.dev 是網頁版 VS Code 的一個定製例項，它與 GitHub 深度整合。登入是自動的，URL 格式遵循 github.com 的 /organization/repo 模型，所以你只需將 .com 改為 .dev 就可以編輯一個倉庫，並且它為 GitHub 定製了淺色和深色主題。
除了 GitHub 上的倉庫，網頁版 VS Code 還支援 Azure Repos（Azure DevOps 的一部分）。為了同時支援兩者，網頁版 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…
就像在桌面版中一樣，你可以透過一個豐富的擴充套件生態系統來定製網頁版 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 試用你的主題（在網頁版 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
又及：如果你錯過了，可以觀看我們的網頁版 VS Code 直播。