惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Jina AI
Jina AI
博客园 - 司徒正美
大猫的无限游戏
大猫的无限游戏
博客园 - 三生石上(FineUI控件)
J
Java Code Geeks
博客园 - 聂微东
酷 壳 – CoolShell
酷 壳 – CoolShell
爱范儿
爱范儿
美团技术团队
腾讯CDC
博客园 - Franky
MyScale Blog
MyScale Blog
人人都是产品经理
人人都是产品经理
罗磊的独立博客
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
aimingoo的专栏
aimingoo的专栏
博客园_首页
V
V2EX
Martin Fowler
Martin Fowler
T
The Blog of Author Tim Ferriss

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
在网页端使用 VS Code 编辑 GitHub 项目——github.dev - 少数派
2021-09-29 · via 少数派

Matrix 首页推荐

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

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


简介

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

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

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

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

通常我在网页端查看代码时,会用到 github1s 这个项目。这个项目可以通过在项目 URL 的 GitHub 后面 *加油* 来快速打开在线版的 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 客户端、关注 少数派公众号,解锁全新阅读体验 📰

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