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

朴灿烈づ我的快乐病毒、 2022-08-28 00:55 124阅读 0赞

![c60ae7b702b4a9dc816d18efd72ee4c6.png][]

翻译 | 韩老师 + Google Translate 作者 | Chris Dias

来源 | https://code.visualstudio.com/blogs/2021/10/20/vscode-dev

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

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

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

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

![5b6f3200c870d25edaee63f4756715c5.png][]

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

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

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

![f3123a1ff61704bceccdf39a85784279.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，仍然可以通过浏览器上传和下载单个文件来打开它们。

![7a7fe7f222b1cb8ebb4c78ee4567f1e6.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 代码的扩展，或者运行了可执行文件的扩展，仍然会显示在扩展搜索结果中，但被明确标记为不可用。

![2463313a54ae8c17b7a23fda46971622.png][]

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

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

![5c276d4c8f036d63b86baea33d96a5b6.png][]

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

如果您正在学习Spring Boot，推荐一个连载多年还在继续更新的免费教程：http://blog.didispace.com/spring-boot-learning-2x/

![ff9ef274d94cff0f1aa7207d6b71ca1e.png][]

### GitHub ###

VS Code 的许多扩展都基于 GitHub。例如，CodeTour扩展允许你创建代码库的指导性演练，而WikiLens扩展将 VS Code 和你的存储库变成一个强大的笔记工具（具有双向链接）。为了方便访问 GitHub 中的代码，VS Code for the Web 内置了GitHub Repositories、Codespaces和Pull Request扩展。你可以进行快速编辑、审查 PR，并继续进行本地克隆。如果你想要更强大的语言体验或需要在合并提交之前构建、运行和测试更改，你可以使用 GitHub Codespace 来获得更强的开发体验，

![47ae7674f9995a1987eed084c4399f18.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 上，则可以通过扩展提供对其他存储库托管服务的支持，就像在桌面上一样。如上所述，这些扩展需要支持在浏览器中完全运行。

另外，如果您正在学习Spring Cloud，推荐一个连载多年还在继续更新的免费教程：https://blog.didispace.com/spring-cloud-learning/

### 再聊聊 URL ###

就像在桌面上一样，您可以通过支持几乎所有后端、语言和服务的丰富扩展生态系统，来定制 VS Code for the Web。不像在桌面上，很容易让我们能够提供自定义体验与通过独特的预安装的扩展程序`vscode.dev`的网址（例如`vscode.dev/github`和`vscode.dev/azurerepos`）。

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

![92c1c608cfbd8bf044c9ef95f44899c2.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`将被传递到扩展，使加入的体验如丝般顺滑。

![bbad75eb728b0693e8181f707dca1011.png][]

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

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

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

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

敬请期待更多！

往期推荐

[抖音前端团队发文致歉，承认借鉴 Ant Design][Ant Design]

[JWT 应该保存在哪里？][JWT]

[一个月薪 12000 的北京程序员的真实生活][12000]

[一文带你入门 JMeter 性能测试！][JMeter]

[程序员的“鱿鱼游戏”，你能活到第几关？][Link 1]

**![4b9f64817db479fc76e59ababfda8bcf.png][]技术交流群![03712324a022966636a0098fa2fc2088.png][]**

最近有很多人问，有没有读者交流群，想知道怎么加入。加入方式很简单，有兴趣的同学，只需要点击下方卡片，回复“**加群**“，即可免费加入我们的高质量技术交流群！

点击**阅读原文**，送你免费Spring Boot教程！

[c60ae7b702b4a9dc816d18efd72ee4c6.png]: /images/20220828/4f920fbaa9de418285adee59c7cfb62a.png
[5b6f3200c870d25edaee63f4756715c5.png]: /images/20220828/d385cecc1a5646c7bded91e38370211e.png
[f3123a1ff61704bceccdf39a85784279.png]: /images/20220828/004a2b29b04a4734aff5c0d60b61bd5e.png
[7a7fe7f222b1cb8ebb4c78ee4567f1e6.png]: /images/20220828/cfcdc84ff48745aab4c14a5e92e59586.png
[2463313a54ae8c17b7a23fda46971622.png]: /images/20220828/01bc280e71cb4b5ebef74acd30180e1e.png
[5c276d4c8f036d63b86baea33d96a5b6.png]: /images/20220828/4f2c872624c04f29a6b6d52ce88becd2.png
[ff9ef274d94cff0f1aa7207d6b71ca1e.png]: /images/20220828/36053c3bee4241cabc21accc26b32882.png
[47ae7674f9995a1987eed084c4399f18.png]: /images/20220828/8dea0588cbb34657a29dccfb407fc836.png
[92c1c608cfbd8bf044c9ef95f44899c2.png]: /images/20220828/6f7cbe280d1744e9a96dc5e3846c1cac.png
[bbad75eb728b0693e8181f707dca1011.png]: /images/20220828/71683c615e074690a255fe65dc274e04.png
[Ant Design]: http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ==&mid=2247544710&idx=2&sn=d991de3edbc2aa72a14933a1fd963402&chksm=9bd3821eaca40b089d389dcf00ad355d801b7b4c93f9c618d83bf9bd255fe22fa8f9f5919627&scene=21#wechat_redirect
[JWT]: http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ==&mid=2247544607&idx=2&sn=d08ef0f4269152e35c511d2097ab100b&chksm=9bd38287aca40b9188a4014ee058a33bae0135f4920895234104c0d60e009bad5a366f26818d&scene=21#wechat_redirect
[12000]: http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ==&mid=2247544543&idx=1&sn=5a5478fd329284f94db463ed76f7f174&chksm=9bd38347aca40a5194bcbafcb097c6f26df9857858d0df7f5193f829d0568c61be39e42f4eeb&scene=21#wechat_redirect
[JMeter]: http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ==&mid=2247544494&idx=2&sn=1081a7859a302551c6b88efa58bdfd09&chksm=9bd38336aca40a2053a5764c07e2f9d525c5c0427ea881d5139d948da179bb1628d7f1fae326&scene=21#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ==&mid=2247544410&idx=1&sn=79c78be74d0c0102b625662413b4ff95&chksm=9bd383c2aca40ad43b66a9c677a7036fcab5020e82f4398b744fe9b7a31303951788946e53a8&scene=21#wechat_redirect
[4b9f64817db479fc76e59ababfda8bcf.png]: https://img-blog.csdnimg.cn/img_convert/4b9f64817db479fc76e59ababfda8bcf.png
[03712324a022966636a0098fa2fc2088.png]: /images/20220828/f5111963e48e48d990f857cfc8e21dad.png