github以vscode的方式1秒钟查看源码的方法

hzxOnlineOk

已于 2022-06-15 14:39:28 修改

阅读量2.2k

点赞数

分类专栏： git 文章标签： javascript github

于 2022-06-15 14:27:25 首次发布

本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/125296485

版权

git 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了github1s项目，一个让VSCode直接访问GitHub代码的解决方案，通过简单的URL修改即可在本地编辑器中查看GitHub代码，无需依赖微软的Codespaces。项目开源，可自行构建或二次开发。

摘要由CSDN通过智能技术生成

简介

github提供了一种切换vscode风格的模式，方便我们更直观的查看源码，就是在路径中加上1s，例如：

https://github1s.com/ant-design/ant-design

以上是查看ant-design项目的源码项目

效果图

在这里插入图片描述

具体介绍（摘自https://zhuanlan.zhihu.com/p/350330364）

GitHub Codespaces 的到来，把 VS Code 带入了浏览器。

微软宣布 Visual Studio Codespaces 将停用，其功能将被整合到 GitHub Codespaces 中
可惜的是，目前 GitHub Codespaces 还处于有限的 beta 版，并不是所有人都能使用到。

那么，有没有其他方法，直接能在 VS Code 上查看 GitHub Repo 的代码呢？

近日，GitHub上出现了这样一个项目，可以使用户直接在 VS Code 界面读取 GitHub 项目的代码，实现了 GitHub 项目与 VS Code 的无缝衔接。

这个项目名为 github1s，只需要在浏览器地址栏 GitHub 网址链接中的「github 」后面添加 1s ，然后 Enter 键，即可在 VS Code 界面访问该项目的 Repo 代码。据项目主页显示，项目开发者来自百度。

项目地址：https://github.com/conwnet/github1s

据作者介绍，这个项目的用法很简单，比如你现在正在看 facebook/react 这个代码库的代码，觉得页面切来切去很麻烦，直接在浏览器地址栏 http://github.com 中的 github 后面，加上个 1s，然后回车就行了，所有的公开代码库都可以。

URL 从

https://github.com/facebook/react

变成了

https://github1s.com/facebook/react

这就是加「1s」的神奇力量！

实现原理

github1s 是一个纯前端的项目，使用了 GitHub REST API 实现一个带 FileSystemProvider 的 VS Code extension。网站直接用的 gh-pages 托管，如果遇到了 Rate Limiting 设置个 OAuth Token 就好了，没有自己的服务部署，所以这网站服务理论上不会挂。

自行开发

github1s 完全开源，我们也可以基于源代码自行构建进行二次开发！

首先需要准备以下先决条件

$ git clone git@github.com:conwnet/github1s.git
$ cd github1s
$ yarn
$ yarn watch
$ yarn serve # in another shell
$ # Then visit http://localhost:5000 or http://localhost:5000/conwnet/github1s once the build is completed.