重磅！微软发布 vscode.dev，把 VSCode 带入浏览器！

我不是女神ヾ 2022-09-17 03:06 127阅读 0赞

![b9e31906998b0664b511285a9600b5f1.png][]

原作者：Chris Dias

原文：https://code.visualstudio.com/blogs/2021/10/20/vscode-dev

翻译：韩老师 + Google Translate

早在 2019 年，当`.dev` 顶级域名开放时，我们赶紧注册了 `vscode.dev`。像许多购买`.dev` 域名的人一样，我们不知道我们将用它做啥。反正，也占个坑吧！

### 将 VS Code 带入浏览器 ###

直到今天，当你转到 https://vscode.dev 时，你将看到一个完全在浏览器中运行的轻量级 VS Code。在本地机器上打开一个文件夹并开始编码。

无需任何的安装。如丝般顺滑。

![402de93a1eadac5889d72f6ba7244e38.png][]

随着 vscode.dev 的出现，我们最终实现了我们最初的愿景，即构建一个可以在浏览器中完全无服务器运行的开发工具。

那么，我们可以在 VS Code for the Web 上做什么呢？

### 使用云工具进行本地开发 ###

![d852ccd328cf136f656f684bc9884aab.png][]

支持文件系统访问 API（目前的 Edge 和 Chrome）的现代浏览器允许网页访问本地文件系统（在你的许可下）。这个简单的本地机器网关，快速打开了一些使用 VS Code for the Web 作为零安装本地开发工具的有趣场景，例如：

*  本地文件查看和编辑。在 Markdown 中快速记笔记（和预览！）。即使你在无法安装完整 VS Code 的受限机器上，仍然可以使用 vscode.dev 查看和编辑本地文件。
 *  结合浏览器工具构建客户端 HTML、JavaScript 和 CSS 应用程序以进行调试。
 *  在 Chromebook 等低功率机器上编辑代码，因为你无法（或者说 “轻松地”）在 Chromebook 安装 VS Code。
 *  在 iPad 上开发。你可以上传 / 下载文件（甚至使用 Files 应用程序将它们存储在云中），以及使用内置的 GitHub 存储库扩展远程打开存储库。

而且，如果你的浏览器不支持本地文件系统 API，仍然可以通过浏览器上传和下载单个文件来打开它们。

![425713b8b96834ce5bf1029ba88321c5.png][]

**轻量级体验**

由于 VS Code for the Web 完全在浏览器中运行，因此与你在桌面应用程序中可以执行的操作相比，某些体验自然会受到更多限制。例如，终端和调试器不可用。这是有道理的，因为你无法在浏览器沙箱中编译、运行和调试 Rust 或 Go 应用程序（尽管 Pyodide 和 Web 容器等新兴技术有一天可能会改变这一点）。

更微妙的是代码编辑、导航和浏览体验，在桌面上，这些体验通常由需要文件系统、运行时和计算环境的语言服务和编译器提供支持。在浏览器中，这些体验由*完全在浏览器中运行*的语言服务（无文件系统，无运行时）提供支持，这些服务提供源代码标记化和语法着色、完成和许多单文件操作。

因此，在浏览器中时，体验通常分为以下几类：

**好**：对于大多数编程语言，vscode.dev 为你提供代码语法着色、基于文本的完成和括号对着色。使用 Tree-sitter 语法树，我们能够为流行语言（如 C/C++、C\#、Java、PHP、Rust 和 Go）提供额外的体验，例如大纲 / 转到符号和符号搜索。

**更好**：TypeScript、JavaScript 和 Python 体验都由在浏览器中本地运行的语言服务提供支持。使用这些编程语言，你将获得 “良好” 体验以及丰富的单文件补全、语义突出显示、语法错误等。

**最好**：对于许多 “webby” 语言，例如 JSON、HTML、CSS 和 LESS，vscode.dev 中的编码体验几乎与桌面相同（包括 Markdown 预览！）。

### 扩展 ###

大多数 UI 自定义扩展（例如主题、键映射和代码段）都可以在 vscode.dev 中使用，你甚至可以通过 Settings Sync 在浏览器、桌面和 GitHub 代码空间之间启用漫游。

使用了操作系统模块的 Node.js 代码的扩展，或者运行了可执行文件的扩展，仍然会显示在扩展搜索结果中，但被明确标记为不可用。

![e1250c1e41e12b483b57601969dd0a9f.png][]

也就是说，越来越多的扩展已经更新到可以在浏览器中使用，而且每天都有更多的扩展。

> 注意：如果你是扩展作者并希望在浏览器中使用你的扩展，请查看我们的 Web 扩展创作指南。https://code.visualstudio.com/api/extension-guides/web-extensions

例如，Luna Paint - Image Editor 扩展允许你直接在 VS Code 中编辑光栅图像。该扩展为 VS Code 带来了丰富的设计工具（例如图层和混合工具），当然你也可以将图像保存到本地磁盘。

![2d93159561a255cf653528bb5907d9db.png][]

在 GitHub Issue Notebooks 带来了 GitHub Issues 的 Notebook 体验。有了它，你可以将查询、结果，甚至描述查询目的的 Markdown 混合到一个编辑器中。

![faeaf55e8534b7328cf65b5e05614b8f.png][]

### GitHub ###

VS Code 的许多扩展都基于 GitHub。例如，CodeTour 扩展允许你创建代码库的指导性演练，而 WikiLens 扩展将 VS Code 和你的存储库变成一个强大的笔记工具（具有双向链接）。

为了方便访问 GitHub 中的代码，VS Code for the Web 内置了 GitHub Repositories、Codespaces 和 Pull Request 扩展。你可以进行快速编辑、审查 PR，并继续进行本地克隆。

如果你想要更强大的语言体验或需要在合并提交之前构建、运行和测试更改，你可以使用 GitHub Codespace 来获得更强的开发体验，

![fe37ae450cacd7a24f8f3ca2778d4b68.png][]

哇噻，听起来很像 `github.dev` 不是吗？为什么是两个呢 ？？！！

真是个好问题呀！

`github.dev` 是深度集成到 GitHub 中的 Web 版 VS Code 定制实例。登录是自动的，URL 格式如下 github.com 的 `/organization/repo` 模式，使你可以简单地改变`.com` 到`.dev` 以编辑代码。

除了 GitHub 上的存储库，VS Code for the Web 还支持 Azure Repos（Azure DevOps 的一部分）。为了同时使用这两者，VS Code for the Web 支持两种路由，`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 for the Web。不像在桌面上，很容易让我们能够提供自定义体验与通过独特的预安装的扩展程序 `vscode.dev` 的网址（例如 `vscode.dev/github` 和 `vscode.dev/azurerepos`）。

例如，尝试浏览到 vscode.dev/theme/sdras.。

![224ac4dfaaf89d12a9f7b08d32e5fb8d.png][]

在这里你可以直接体验 @sarah\_edo 的夜猫子颜色主题。无需安装！如果您是主题作者，你甚至可以在 README 中创建一个徽章，让用户直接从 Marketplace 试用你的主题（在 VS Code for the Web 用户指南中了解更多信息：https://code.visualstudio.com/docs/editor/vscode-web\#\_themes）。

如你所见，`vscode.dev`URL 是我们提供轻量级新体验的强大方式。另一个示例，是 Live Share 来宾会话，也将通过 `https://vscode.dev/liveshare`URL 在浏览器中可用。在 `sessionId` 将被传递到扩展，使加入的体验如丝般顺滑。

![2d60d0f64909f78d7bd189d9b8aaaa9f.png][]

`vscode.dev`URL 的可能性是无穷无尽的，我们很高兴在未来几个月内与你分享更多想法。

### 未来的路，怎么走？ ###

将 VS Code 引入浏览器是对产品最初愿景的实现。这也是一个全新的开始。

任何拥有浏览器和互联网连接的人，都可以使用我们的编辑器。这是未来我们可以真正从任何地方编辑任何内容的基础。

**推荐阅读:**

入门: [最全的零基础学Python的问题][Python] | [零基础学了8个月的Python][8_Python] | [实战项目][Link 1] |[学Python就是这条捷径][Python 1]

量化: 定投基金到底能赚多少钱？  | 我用Python对去年800只基金的数据分析

干货:[爬取豆瓣短评，电影《后来的我们》][Link 2] | [38年NBA最佳球员分析][38_NBA]| [从万众期待到口碑扑街！唐探3令人失望][3] | [笑看新倚天屠龙记][Link 3][灯谜答题王][Link 4] ｜[用Python做个海量小姐姐素描图][Python 2][碟中谍这么火，我用机器学习做个迷你推荐系统电影][Link 5]

趣味:[弹球游戏][Link 6] | [九宫格][Link 7] | [漂亮的花][Link 8] | [两百行Python《天天酷跑》游戏!][Python 3]

AI: [会做诗的机器人][Link 9][给图片上色][Link 10] | [预测收入][Link 11] | [碟中谍这么火，我用机器学习做个迷你推荐系统电影][Link 5]

小工具: [Pdf转Word，轻松搞定表格和水印！][Pdf_Word] | [一键把html网页保存为pdf！][html_pdf]| [再见PDF提取收费！][PDF] | [用90行代码打造最强PDF转换器，word、PPT、excel、markdown、html一键转换][90_PDF_word_PPT_excel_markdown_html] | [制作一款钉钉低价机票提示器！][Link 12] ｜[60行代码做了一个语音壁纸切换器天天看小姐姐！][60]｜

**年度爆款文案**

*  1).[卧槽！Pdf转Word用Python轻松搞定][Pdf_Word_Python]！
 *  [2).学Python真香！我用100行代码做了个网站，帮人PS旅行图片，赚个鸡腿吃][2_._Python_100_PS]
 *  [3).首播过亿，火爆全网，我分析了《乘风破浪的姐姐》，发现了这些秘密][3_.]
 *  4).[80行代码！用Python做一个哆来A梦分身][80_Python_A]
 *  [5).你必须掌握的20个python代码，短小精悍，用处无穷][5_._20_python]
 *  6).[30个Python奇淫技巧集][30_Python]
 *  7).[我总结的80页《菜鸟学Python精选干货.pdf》,都是干货][80_Python_.pdf]
 *  8).[再见Python！我要学Go了！2500字深度分析][Python_Go_2500]
 *  [9).发现一个舔狗福利！这个Python爬虫神器太爽了，自动下载妹子图片][9_._Python]

#  #

点阅读原文,学Python全套！

[b9e31906998b0664b511285a9600b5f1.png]: /images/20220828/b3bca005596d428e928b2a8315dc6889.png
[402de93a1eadac5889d72f6ba7244e38.png]: /images/20220828/555793417ca4456cbb2d4fab454d6570.png
[d852ccd328cf136f656f684bc9884aab.png]: /images/20220828/b289ef2debd2474994b0558b5a6c87ba.png
[425713b8b96834ce5bf1029ba88321c5.png]: /images/20220828/ced7d6ffc7724a16a462dce684238a9a.png
[e1250c1e41e12b483b57601969dd0a9f.png]: /images/20220828/38021b6bc3584df1ab99e9079a7d7c84.png
[2d93159561a255cf653528bb5907d9db.png]: /images/20220828/8193e33470bb45cb99c19276da4268b9.png
[faeaf55e8534b7328cf65b5e05614b8f.png]: /images/20220828/a4838a7fd6894fdb83c7ec04ddc195a2.png
[fe37ae450cacd7a24f8f3ca2778d4b68.png]: /images/20220828/d488ca08f915473c80478fa513ffc96a.png
[224ac4dfaaf89d12a9f7b08d32e5fb8d.png]: /images/20220828/ecb426e742cc4075a222521f85b0ae2d.png
[2d60d0f64909f78d7bd189d9b8aaaa9f.png]: /images/20220828/ddd842b1890b4e1d990b330000d50f75.png
[Python]: https://blog.csdn.net/cainiao_python/article/details/100036887
[8_Python]: https://blog.csdn.net/weixin_33863087/article/details/91440273
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjM4NDE2MA==&mid=2247489785&idx=1&sn=8acad1d7655f73702c78fe3af2fbd43a&chksm=97888f36a0ff0620bbc9e19e1783a1b3871a13485e56e58c2c2f49922951952238cb0f2ab78f&scene=21#wechat_redirect
[Python 1]: https://blog.csdn.net/weixin_39637571/article/details/110277976
[Link 2]: https://blog.csdn.net/u013402772/article/details/51159588
[38_NBA]: https://blog.csdn.net/EtoneGroup/article/details/111317660
[3]: https://blog.csdn.net/cainiao_python/article/details/119723059
[Link 3]: https://blog.csdn.net/weixin_39568172/article/details/110172136
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzIxNjM4NDE2MA==&mid=2247489108&idx=1&sn=988aad43f8c6135bd7050cd8858422ca&chksm=9788819ba0ff088da3150b31f91335942eb97783206d982302c026ccb16642b03329e24a572a&scene=21#wechat_redirect
[Python 2]: https://blog.csdn.net/weixin_43881394/article/details/109030981
[Link 5]: https://blog.csdn.net/z3y3m3/article/details/105295040
[Link 6]: http://mp.weixin.qq.com/s?__biz=MzIxNjM4NDE2MA==&mid=2247484006&idx=1&sn=899e1ebeed40aa42c04c65975adcc0f4&chksm=978895a9a0ff1cbffbcd970db026540667f1413c5680305769e4e7a2cfbe5730e70b9e649bb9&scene=21#wechat_redirect
[Link 7]: http://mp.weixin.qq.com/s?__biz=MzIxNjM4NDE2MA==&mid=2247483945&idx=1&sn=3bf763ec6b2d6cfed33b5bb0e913e08c&chksm=978895e6a0ff1cf0e7b10ebe9cd7b4195aa9a9e25eeaad50f8b17b62d83fc114cbd9620fd69e&scene=21#wechat_redirect
[Link 8]: http://mp.weixin.qq.com/s?__biz=MzIxNjM4NDE2MA==&mid=2247483844&idx=1&sn=66cc4f532e2ee95427228eb6302b6e0d&chksm=9788960ba0ff1f1dd9d86868d01c96936501612bc9d3c9c9c7a55dd5b02c366a9f997ec2c172&scene=21#wechat_redirect
[Python 3]: https://blog.csdn.net/cainiao_python/article/details/112551393
[Link 9]: https://blog.csdn.net/qq_41424519/article/details/81943237
[Link 10]: http://mp.weixin.qq.com/s?__biz=MzIxNjM4NDE2MA==&mid=2247489691&idx=1&sn=e207bfaebba4638cc00e425c6d5f41de&chksm=97888f54a0ff064253c69f08ddaced17273d430989aec293e17708e68dab675fce236bfc7af7&scene=21#wechat_redirect
[Link 11]: http://mp.weixin.qq.com/s?__biz=MzIxNjM4NDE2MA==&mid=2247489216&idx=1&sn=7eb7701a50bc3686ecdfc1921c984bb4&chksm=9788810fa0ff0819035e9226b45349b1482a38410b4ad7bae210aaf9a19709ef8b634b3319dc&scene=21#wechat_redirect
[Pdf_Word]: https://blog.csdn.net/weixin_39766071/article/details/110307080
[html_pdf]: https://blog.csdn.net/keenweiwei/article/details/18982565
[PDF]: https://blog.csdn.net/weixin_52994140/article/details/118422342
[90_PDF_word_PPT_excel_markdown_html]: https://blog.csdn.net/cainiao_python/article/details/115499784
[Link 12]: https://blog.csdn.net/cainiao_python/article/details/117457955
[60]: https://blog.csdn.net/cainiao_python/article/details/118470443
[Pdf_Word_Python]: https://blog.csdn.net/cainiao_python/article/details/106233091
[2_._Python_100_PS]: https://blog.csdn.net/i54996/article/details/120728857
[3_.]: https://blog.csdn.net/cainiao_python/article/details/113976671
[80_Python_A]: https://blog.csdn.net/weixin_39710561/article/details/110026654
[5_._20_python]: https://blog.csdn.net/q985875757/article/details/119809368
[30_Python]: https://blog.csdn.net/sinat_38682860/article/details/89288593
[80_Python_.pdf]: https://blog.csdn.net/cainiao_python/article/details/112057378
[Python_Go_2500]: https://blog.csdn.net/cainiao_python/article/details/116213390
[9_._Python]: http://mp.weixin.qq.com/s?__biz=MzIxNjM4NDE2MA==&mid=2247499091&idx=1&sn=15550f3afc5e1834a5f9d581416a47f8&chksm=978b6a9ca0fce38a3c22059103b2b4abf0b4008db53b4aad418b45cf2e785f4d971767237d79&scene=21#wechat_redirect