大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信?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 一樣推出自制的開發環境！

參考資料

[1]

vscode.dev: vscode.dev

[2]

vscode.dev: vscode.dev

[3]

File System Access API: https://developer.mozilla.org/docs/Web/API/File_System_Access_API

[4]

Settings Sync: https://code.visualstudio.com/docs/editor/settings-sync

[5]

Luna Paint - Image Editor: https://marketplace.visualstudio.com/items?itemName=Tyriar.luna-paint

[6]

GitHub Issue Notebooks: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-github-issue-notebooks

[7]

GitHub Repositories: https://code.visualstudio.com/docs/editor/github#_github-repositories-extension

[8]

Codespaces: https://code.visualstudio.com/docs/remote/codespaces

[9]

Pull Request: https://code.visualstudio.com/docs/editor/github#_getting-started-with-github-pull-requests-and-issues

[10]

web 插件規范: https://code.visualstudio.com/api/extension-guides/web-extensions

[11]

WebContainers: https://link.zhihu.com/?target=https%3A//blog.stackblitz.com/posts/introducing-webcontainers/

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西 拉你進群。

推薦閱讀

1個月，200+人，一起讀了4周源碼
我歷時3年才寫了10余篇源碼文章，但收獲了100w+閱讀

老姚淺談：怎么學JavaScript？

我在阿里招前端，該怎么幫你（可進面試群）

·················?若川簡介?·················

你好，我是若川，畢業于江西高校?，F在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》10余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助1000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~

總結

以上是生活随笔為你收集整理的随时随地能写代码， vscode.dev 出手了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。