隨時隨地能寫代碼， vscode.dev 出手了

大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信?ruochuan12?參與。

今天偶然看到了 VSCode 官方發布了一條激動人心的 Twitter，vscode.dev^[1] 域名上線了！

image-20211021211915942

新的域名 vscode.dev^[2] 它是一個 web 版的 VSCode 。無論你是在用什么設備，不需要任何依賴，能夠讓你隨時隨地在瀏覽器寫代碼！

我們常常在提 Cloud IDE，但是以前的種種似乎都要么只是一個 VSCode 的外殼，要么就是在遠端運行了一個鏡像來實現。

vscode.dev running in the browser

來看看這次它帶來一些不一樣的地方

本地文件查看和編輯
插件機制
拉取 Github
自定義主題

本地文件查看和編輯

這次 Web VSCode 使用 File System Access API^[3] ，在用戶給與權限的情況下，能夠操作本地文件系統，這使得我們能夠直接使用瀏覽器去編寫本地的代碼。

這帶來了三個比較實用的應用場景：

本地文件查看和編輯，快速編寫例如 markdown 這種輕量的格式。
在不能（輕松）安裝 VS Code 的低端機器（如 Chromebook）上編輯代碼。
在 iPad 上開發。你可以通過上傳/下載文件來編寫代碼（甚至使用 Files App將它們存儲在云中），以及使用內置的 GitHub 存儲庫擴展遠程打開存儲庫。

vscode.dev

插件機制

大多數UI自定義擴展（如主題，快捷鍵和代碼段）都在 vscode.dev 中工作，你甚至可以通過Settings Sync^[4]（設置同步）使在瀏覽器，桌面應用和GitHub代碼空間之間進行無縫銜接。

例如 Luna Paint - Image Editor^[5] 插件，一個具有豐富功能的VCode插件(例如，圖層和混合工具)，可以直接在 web 上使用，并且你可以將圖片下載到本地。

image-20211021235956316

GitHub Issue Notebooks^[6] ?插件可以通過筆記的方式去管理 GitHub Issues。這樣，你就可以將查詢、反饋甚至Markdown筆記都集中到一個編輯器中。

拉取 Github

Web 的 VSCode 自帶了 GitHub Repositories^[7]，Codespaces^[8]和 Pull Request^[9] 的擴展，能夠讓你輕松訪問 Github中的代碼。

Github拉取代碼

Pull Request

Github Codespaces（需要付費）

這看起來和 github.dev 很像。

但是 vscode.dev 除了GitHub上的存儲庫外，Web的 VSSode 還支持Azure Repos（Azure DevOps的一部分）。要使用兩者，Web 的 VSCode 需要添加兩個路由，vscode.dev/github 和 vscode.dev/azurerepos

例如 ?https://github.com/microsoft/vscode 改為

'https://vscode.dev/github.com/Microsoft/vscode'.

Azure Repos 也是一樣， https://dev.azure.com/… ?改為

'https://vscode.dev/dev.azure.com /…'.

主題

和上面快速訪問 github/ azure 存儲庫類似，通過添加特殊的路徑來展示不一樣的主題。

https://vscode.dev/theme/sdras.night-owl

Night Owl color theme in vscode.dev

總結

插件機制還是令人驚艷的，正如官方所說，越來越多的插件正在發布，并且也定制了[web 插件規范](Web Extensions authoring guide^[10].) ，未來將會有越來越多的可能，例如 StackBlitz 推出了直接在瀏覽器中使用 WebAssembly 跑 Node.js 的Web IDE WebContainers^[11]。但是在瀏覽器無法使用終端還是比較傷，確實閹割了比較重要的功能，后續就看插件能否來填補這塊的空缺，像 StackBlitz 一樣推出自制的開發環境！