随时召唤云端 VS Code,你可以试试 Github.dev
2021-10-12 15:31:26 Author: sspai.com(查看原文) 阅读量:20 收藏

在网页端使用 VS Code 编辑 GitHub 项目——github.dev

Matrix 首页推荐

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。


简介

GitHub ,全球最大的代码托管平台。即使你不是程序员,你也可能会使用 GitHub 来下载软件、反馈问题、建立个人博客等。

虽然 GitHub 本身可以直接在网页端进行新建、编辑文件的操作。但是每次只能编辑一个文件,使用体验也说不上太好。虽然有代码高亮、支持多行编辑等功能。但是距离一个好的文本编辑器还有一些距离。比如不支持 vim 模式、不小心关闭窗口后编辑的内容就会丢失。

而想要获得一个好的编辑环境,是一件比较麻烦的事情。你需要安装 Git 、安装文本编辑器以及进行各种配置。这些困难使得我们从使用一台新设备,到上手编辑代码之间需要花费很多时间。

要如何在网页端实现一个优秀的编辑体验呢?之前有很多人介绍过的 GitHub1s 项目提供了一个实现思路。

通常我在网页端查看代码时,会用到 github1s 这个项目。这个项目可以通过在项目 URL 的 GitHub 后面 +1s 来快速打开在线版的 VS Code。

但是这种方式打开的 VS Code 只能用于阅读源码不支持编辑功能,并且不能添加扩展。那么有没有一种方式可以直接编辑代码、支持添加扩展呢?答案是有的,而且这还是 GitHub 官方推出的功能: GitHub.dev 项目

在任何存储库或拉取请求上按 . 键,或者将 URL 中的 .com 替换为 .dev,以直接进入浏览器中的 VS Code 环境。

这是一种编辑和导航代码的快捷方式。 如果您想一次编辑多个文件或在进行快速更改时利用 Visual Studio Code 的所有强大的代码编辑功能,它尤其有用。 有关更多信息,请参阅我们的 文档
 

github/dev 这个项目的第一次提交时间是 2021年8月20日,但是似乎并没有什么文章介绍。我找到这个功能还是在 codespaces 的介绍页面下方看到的一句话介绍,这个功能藏得还挺深的。

快速打开

使用方式前面也已经提到了,直接在对应项目页面按 . 键即可,但是我在浏览器上是习惯使用 Surfingkeys 扩展(为浏览器添加 VIM 快捷键),. 键已经被分配给了「重复最近一次操作」功能。

虽然也可以直接在地址栏修改 .com 替换为 .dev 来进入。但是我还是选择了另外一种方式,使用油猴脚本增加按钮,显示 Github.dev 按钮

在 Github 网站顶部显示 Github.dev 按钮,Github.dev 是一个利用 VS Code Online 浏览代码的项目

安装完成,刷新页面后即可在项目上方看到 Github.dev 按钮。

使用体验

进入网页版 VS Code 后,操作方式与桌面版并无太大差别。你可以使用习惯的方式进行文件的编辑,但是网页版还是会有一些差距的,下面简单介绍一下差异的地方。

设置同步

不知道是不是 BUG 虽然点击下面的同步选项可以弹出设置,但其实并不能同步桌面版的设置。

网页版是另外保存的一套设置。配置过一次之后,不管是打开其他项目还是关闭浏览器再打开,设置都会保留。

自动保存

相比起桌面版 VS Code,网页版可能是考虑到网络问题,在文件修改之后会立刻进行自动保存,不会出现代表 未保存 的小白点。

这个编辑过后的文件在关闭浏览器再次打开,也是会保留的。

桌面版在修改后会有小白点

无需 pull

通常我们在桌面版 VS Code 在编辑完本地文件后,需要将本地仓库的内容推送到远程仓库(GitHub)而 GitHub.dev 在提交 commit 之后无需再推送到远程仓库。整体操作类似于编辑本地仓库,节省了一些操作。

新增 issue

可以直接在 VS Code 内新建 issue。在 issue 页面点击添加按钮,就会出现一个 issue 模板的文件。

  • 最上方一行是 issue 的标题;
  • 第二行是受让人;
  • 第三行是标签;
  • 后面的就是正文部分了。

填写完成后点击右上角的 即可完成创建。不过只能进行新建操作,并不能进行现有 issue 的编辑,确实非常可惜。

多平台支持

用网页版可以带来的优势就是可以在任何有现代浏览器的设备上使用。当然,在手机设备上的屏幕限制如果不使用桌面模式,基本是无法正常使用的。

支持部分扩展

网页版 VS Code 也可以添加扩展,并且也可以同步。

但是并不是所有扩展都可以安装。在扩展页面,暗色的扩展都是不支持安装的。而且在支持的那些扩展中也有一些带有感叹号的,这些在功能上会有部分限制。比如说 markdownlint 这个扩展就限制无法修改配置文件。

而最离谱的是连语言包扩展都不支持,只能用英文版。幸运的是 vim 模式的扩展是支持在网页版使用的。

总结

虽然 github.dev 目前还有各种各样的问题。依然比不上桌面端 VS Code 的强大功能,但是总体来说还是非常好用的。

使用方便、无需部署、无需付费、支持编辑文件、支持部分扩展……已经有非常充足的理由让人去使用了。

> 下载 少数派 2.0 客户端、关注 少数派公众号,解锁全新阅读体验 📰

> 实用、好用的 正版软件,少数派为你呈现 🚀

breathiness


文章来源: https://sspai.com/post/68891
如有侵权请联系:admin#unsafe.sh