关于visual-studio-code:微软发布-vscodedev把-VS-Code-带入浏览器

264次阅读

共计 3261 个字符,预计需要花费 9 分钟才能阅读完成。

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

早在 2019 年,当.dev 顶级域名凋谢时,咱们连忙注册了 vscode.dev。像许多购买.dev 域名的人一样,咱们不晓得咱们将用它做啥。反正,也占个坑吧!

将 VS Code 带入浏览器

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

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


随着 vscode.dev 的呈现,咱们最终实现了咱们最后的愿景,即构建一个能够在浏览器中齐全无服务器运行的开发工具。

那么,咱们能够在 VS Code for the Web 上做什么呢?

应用云工具进行本地开发


反对文件系统拜访 API(目前的 Edge 和 Chrome)的古代浏览器容许网页拜访本地文件系统(在你的许可下)。这个简略的本地机器网关,疾速关上了一些应用 VS Code for the Web 作为零装置本地开发工具的乏味场景,例如:

  • 本地文件查看和编辑。在 Markdown 中疾速记笔记(和预览!)。即便你在无奈装置残缺 VS Code 的受限机器上,依然能够应用 vscode.dev 查看和编辑本地文件。
  • 联合浏览器工具构建客户端 HTML、JavaScript 和 CSS 应用程序以进行调试。
  • 在 Chromebook 等低功率机器上编辑代码,因为你无奈(或者说“轻松地”)在 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 代码的扩大,或者运行了可执行文件的扩大,依然会显示在扩大搜寻后果中,但被明确标记为不可用。


也就是说,越来越多的扩大曾经更新到能够在浏览器中应用,而且每天都有更多的扩大。

留神:如果你是扩大作者并心愿在浏览器中应用你的扩大,请查看咱们的 Web 扩大创作指南。https://code.visualstudio.com…

例如,Luna Paint – Image Editor 扩大容许你间接在 VS Code 中编辑光栅图像。该扩大为 VS Code 带来了丰盛的设计工具(例如图层和混合工具),当然你也能够将图像保留到本地磁盘。


在 GitHub Issue Notebooks 带来了 GitHub Issues 的 Notebook 体验。有了它,你能够将查问、后果,甚至形容查问目标的 Markdown 混合到一个编辑器中。

GitHub

VS Code 的许多扩大都基于 GitHub。例如,CodeTour 扩大容许你创立代码库的指导性演练,而 WikiLens 扩大将 VS Code 和你的存储库变成一个弱小的笔记工具(具备双向链接)。为了不便拜访 GitHub 中的代码,VS Code for the Web 内置了 GitHub Repositories、Codespaces 和 Pull Request 扩大。你能够进行疾速编辑、审查 PR,并持续进行本地克隆。如果你想要更弱小的语言体验或须要在合并提交之前构建、运行和测试更改,你能够应用 GitHub Codespace 来取得更强的开发体验,


哇噻,听起来很像 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/… 为:

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.。


在这里你能够间接体验 @sarah_edo 的夜猫子色彩主题。无需装置!如果您是主题作者,你甚至能够在 README 中创立一个徽章,让用户间接从 Marketplace 试用你的主题(在 VS Code for the Web 用户指南中理解更多信息:https://code.visualstudio.com…)。

如你所见,vscode.dev 是咱们提供轻量级新体验的弱小形式。另一个示例,是 Live Share 来宾会话,也将通过 https://vscode.dev/liveshareURL 在浏览器中可用。在 sessionId 将被传递到扩大,使退出的体验如丝般顺滑。

将来的路,怎么走?

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

任何领有浏览器和互联网连贯的人,都能够应用咱们的编辑器。这是将来咱们能够真正从任何中央编辑任何内容的根底。

敬请期待更多!


这里有更多微软官网学习材料和技术文档,扫码获取免费版!
内容将会不定期更新哦!

正文完
 0