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

253人浏览 / 0人评论

早在 2019 年,当.dev顶级域名开放时,我们拿起vscode.dev并快速停放,指着我们的网站code.visualstudio.com(或者,如果您像我一样来自波士顿地区,我们“pahked”)。像许多购买.dev域名的人一样,我们不知道我们将用它做什么。而且我们当然没有预料到它最终会完成一项十多年的使命。

将 VS Code 引入浏览器#

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

无需安装。

vscode.dev 在浏览器中运行

随着 vscode.dev 的出现,我们开始最终实现我们最初的愿景,即构建一个可以在浏览器中完全无服务器运行的开发工具。如需完整的历史课程,请查看 Erich Gamma 的 VS Code Day 演讲“VS Code 一夜成名……10 年的制作”

那么,您可以在 VS Code for the Web 上做什么?其实有点……

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

vscode.dev中的“猫说不”应用源码

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

  • 本地文件查看和编辑。在 Markdown 中快速记笔记(和预览!)。即使您在无法安装完整 VS Code 的受限机器上,您仍然可以使用 vscode.dev 查看和编辑本地文件。

  • 结合浏览器工具构建客户端 HTML、JavaScript 和 CSS 应用程序以进行调试。

  • 在 Chromebook 等低功率机器上编辑您的代码,您无法(轻松)安装 VS Code。

  • 在 iPad 上开发。您可以上传/下载文件(甚至使用 Files 应用程序将它们存储在云中),以及使用内置的 GitHub 存储库扩展远程打开存储库。

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

不支持本地文件系统访问消息对话框

轻量级体验

由于 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 代码的扩展,或外壳到本地可执行文件,仍然显示在搜索结果中,但被明确标记为不可用。

有关扩展在 Visual Studio Code for the Web 中不可用的通知

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

注意:如果您是扩展作者并希望在浏览器中使用您的扩展(我们做到了!),请查看我们的Web 扩展创作指南

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

Luna Paint - 在 vscode.dev 中运行的图像编辑器扩展

GitHub的问题笔记本延长带来的笔记本电脑体验到GitHub的问题。有了它,您可以将查询、结果,甚至描述查询目的的 Markdown 混合到一个编辑器中。

在 vscode.dev 中运行的 GitHub Issue Notebooks 扩展

GitHub #

VS Code 的许多扩展都使用存储在 GitHub 中的源代码。例如,CodeTour扩展允许您创建代码库的指导性演练,而WikiLens扩展将 VS Code 和您的存储库变成一个强大的笔记工具(具有双向链接)。为了方便访问 GitHub 中的代码,VS Code for the Web 内置了GitHub RepositoriesCodespacesPull Request扩展。您可以进行快速编辑、审查 PR,并继续到本地克隆,甚至更好, 到GitHub 代码空间,如果您想要更强大的语言体验或需要在合并提交之前构建、运行和测试更改。

继续下拉显示本地克隆存储库或创建新代码空间

哇,听起来很像github.dev不是吗?它们不同吗?相同?为什么是两个??!!

好问题!github.dev是深度集成到 GitHub 中的 Web 版 VS Code 定制实例。登录是自动的,URL格式如下github.com的/organization/repo模式,使您可以简单地改变.com.dev以编辑回购协议,它是定制的GitHub与光明与黑暗的主题。

除了 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…… #

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

例如,尝试浏览到https://vscode.dev/theme/sdras.night-owl

vscode.dev 中的夜猫子颜色主题

在这里你可以体验@sarah_edo “live”流行的夜猫子颜色主题,无需经过下载安装过程,看你不喜欢。无需安装!如果您是主题作者,您甚至可以在您的主题中创建一个徽章,README.md让用户直接从 Marketplace 测试驱动您的主题(在VS Code 的 Web用户指南中了解更多信息)。

随意使用此 URL 与朋友分享您最喜欢的主题。就个人而言,我是@wesbosCobalt2主题忠实粉丝,请查看https://vscode.dev/theme/wesbos.theme-cobalt2请注意,该themeURL 仅适用于完全声明性的主题(无代码)。

如您所见,vscode.devURL 是我们提供轻量级新体验的强大方式。另一个示例是 Live Share 来宾会话也将通过https://vscode.dev/liveshareURL在浏览器中可用sessionId将被传递到扩展,使加入的无缝体验。

带有从浏览器加入会话选项的实时共享对话框

vscode.devURL的可能性是无穷无尽的,我们很高兴在未来几个月内与您分享很多想法。

下一步去哪里?#

将 VS Code 引入浏览器是对产品最初愿景的实现。这也是一个全新的开始。任何拥有浏览器和互联网连接的人都可以使用的临时编辑器是未来我们可以真正从任何地方编辑任何内容的基础。

敬请期待更多……

全部评论

晴天下起了小雨
2017-10-01 18:00
很喜欢,果断关注了
wjmyly7336064
2017-10-01 18:00
相当实用,赞美了
橘大佬
2017-10-01 18:00
就是有些细节再到位点就好了…