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

---

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

image-20211021211915942

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

我們常常在提 Cloud IDE，但是以前的種種似乎都要么只是一個(gè) VSCode 的外殼，要么就是在遠(yuǎn)端運(yùn)行了一個(gè)鏡像來(lái)實(shí)現(xiàn)。

vscode.dev running in the browser

來(lái)看看這次它帶來(lái)一些不一樣的地方

• 本地文件查看和編輯

• 插件機(jī)制

• 拉取 Github

• 自定義主題

本地文件查看和編輯

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

這帶來(lái)了三個(gè)比較實(shí)用的應(yīng)用場(chǎng)景：

• 本地文件查看和編輯，快速編寫(xiě)例如 markdown 這種輕量的格式。

• 在不能（輕松）安裝 VS Code 的低端機(jī)器（如 Chromebook）上編輯代碼。

• 在 iPad 上開(kāi)發(fā)。你可以通過(guò)上傳/下載文件來(lái)編寫(xiě)代碼（甚至使用 Files App將它們存儲(chǔ)在云中），以及使用內(nèi)置的 GitHub 存儲(chǔ)庫(kù)擴(kuò)展遠(yuǎn)程打開(kāi)存儲(chǔ)庫(kù)。

vscode.dev

插件機(jī)制

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

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

image-20211021235956316

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

拉取 Github

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

Github拉取代碼

Pull Request

Github Codespaces（需要付費(fèi)）

這看起來(lái)和 github.dev 很像。

但是 vscode.dev 除了GitHub上的存儲(chǔ)庫(kù)外，Web的 VSSode 還支持Azure Repos（Azure DevOps的一部分）。要使用兩者，Web 的 VSCode 需要添加兩個(gè)路由，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 /…'.

主題

和上面快速訪問(wèn) github/ azure 存儲(chǔ)庫(kù)類似，通過(guò)添加特殊的路徑來(lái)展示不一樣的主題。

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

Night Owl color theme in vscode.dev

總結(jié)

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

參考資料

[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 插件規(guī)范: https://code.visualstudio.com/api/extension-guides/web-extensions

[11]

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

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

推薦閱讀

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

老姚淺談：怎么學(xué)JavaScript？

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

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高校?，F(xiàn)在是一名前端開(kāi)發(fā)“工程師”。寫(xiě)有《學(xué)習(xí)源碼整體架構(gòu)系列》10余篇，在知乎、掘金收獲超百萬(wàn)閱讀。
從2014年起，每年都會(huì)寫(xiě)一篇年度總結(jié)，已經(jīng)寫(xiě)了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，最近組織了源碼共讀活動(dòng)，幫助1000+前端人學(xué)會(huì)看源碼。公眾號(hào)愿景：幫助5年內(nèi)前端人走向前列。

識(shí)別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。歡迎分享、收藏、點(diǎn)贊、在看我的公眾號(hào)文章~

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。