牛逼至極！用這個神器看代碼太舒服了

用法也十分簡單而且好記，下面給大家介紹下。

介紹

比如這里是 Scrapy 的倉庫：https://github.com/scrapy/scrapy，用 GitHub 打開是這樣的：

看代碼的時候我們可能需要一個個點進(jìn)去，速度慢而且感覺不太方便。

為此大家可能安裝了一些 Chrome 插件，比如比較火的是 Octotree，安裝之后效果是這樣的：

安裝這個插件之后，在網(wǎng)頁左側(cè)會出現(xiàn)一個文件樹方便我們快速定位文件。然鵝，個人感覺總不是真正想要的那種味道。

現(xiàn)在好了。

這時候，我們只需要在網(wǎng)址 github 后面加上 1s，變成：https://github1s.com/scrapy/scrapy

沒錯，就是這么簡單好記。

訪問之后，就可以看到這樣的頁面：

是的沒錯，這就在瀏覽器中打開了一個在線版的 VS Code，并打開了 Scrapy 的源代碼，看代碼就非常方便了。

無需克隆，無需任何配置，打開飛速，代碼高亮！

一些快捷鍵也是和 VS Code 一樣的，比如 Cmd/Ctrl + P，就可以快速找到一個文件：

Cmd/Ctrl + F 搜索：

不過我試了一下全局搜索貌似只能限制在一個文件內(nèi)，不知道是哪里設(shè)置的問題。

有的朋友可能會問，代碼能修改嗎？

答案是不能，代碼都是以只讀模式打開的，也就是我們只能看，沒法改。不過這也合情合理，畢竟任意 Repo 都能打開，改了又存到哪里呢？

原理

另外有的朋友可能好奇這個的實現(xiàn)原理是怎樣的，我扒了一下源碼，看到作者是這么介紹的：

“

Github1s is based on VS Code 1.52.1 now. VS Code can be built for a browser version officially. I also used the code and got inspired by Code Server.

Thanks to the very powerful and flexible extensibility of VS Code, we can easily implement a VS Code extension that provides the custom File IO ability using FileSystemProvider API. There is an official demo named vscode-web-playground which shows how it is used.

On the other hand, GitHub provides the powerful REST API that can be used for a variety of tasks which includes reading directories and files for sure.

According to the above, obviously, the core concept of GitHub1s is to implement a VS Code Extension (includes FileSystemProvider) using GitHub REST API.

We may switch to the GitHub GraphQL API for more friendly user experience in the future, thanks to @xcv58 and @kanhegaonkarsaurabh. See details at Issue 12.

GitHub1s is a purely static web app (because it really doesn't need a backend service, does it?). So we just deploy it on GitHub Pages now (the gh-pages branch of this repository), and it is free. The service of GitHub1s could be reliable (GitHub is very reliable) because nobody needs to pay the web hosting bills.

”

總的來說，GitHub1s 這個倉庫是基于 VS Code 構(gòu)建的，靈感來源于 Code Server 這個 Repo，地址為：https://github.com/cdr/code-server，這個就是一個 Online 版的 VS Code。

那作者基于這個做了什么事呢？

他基于 VS Code 提供的 FileSystemProvider API 對接了 GitHub 的 REST API 實現(xiàn)了這些功能。其中前者是 VS Code 提供的，可以提供文件讀寫操作，當(dāng)然讀寫在線文件也是沒問題的了；而后者是 GitHub 提供的，通過 REST API 可以獲取 Repo 的文件夾或者某個文件。

如此，GitHub1s 就誕生了。

知道了原理之后，我們也可以自己把 GitHub1s 代碼下載下來，改寫一下，擴(kuò)展一些功能：比如解除只讀限制，保存的時候直接存儲到自己的 Repo 等。

具體的修改和開發(fā)流程可以參見：https://github.com/conwnet/github1s/blob/master/docs/guide.md#development

訪問頻率限制

另外作者也提到了一點：

“

For unauthenticated requests, the rate limit allows for up to 60 requests per hour. Unauthenticated requests are associated with the originating IP address, and not the user making requests.

”

對于未授權(quán)的請求，API 的請求頻率是有限制的，每個 IP 每個小時訪問限制是 60 次，所以用著用著就容易超限制了，可能就打不開文件了。

這里的頻率限制我解讀下，有朋友可能好奇，因為這個網(wǎng)站是 github1s.com 來 serve 的，所以請求是不是都是 github1s.com 這個服務(wù)器發(fā)出來的呢？所以不同的人其實都是用的一個 IP？

其實不是的，我觀察了一下網(wǎng)絡(luò)請求，是當(dāng)前網(wǎng)頁直接請求了 GitHub 的 API 實現(xiàn)的，所以 IP 就是我們自己客戶端的真實 IP，網(wǎng)絡(luò)請求如下所示：

但是請求 GitHub 的 API 沒有跨域問題嗎？

沒有，這是因為 GitHub API 設(shè)置了解除跨域訪問，Response Headers 里面可以看到：

access-control-allow-origin:?*

所以任何網(wǎng)站都可以直接請求 GitHub 的 API。

OK，說回解除頻率限制的問題：

“

For API requests using Basic Authentication or OAuth, you can make up to 5,000 requests per hour.

”

這里說如果登錄了，每小時就可以提高到 5000 次請求了。

怎么設(shè)置呢？

可以在 github1s.com 打開側(cè)欄的 OAuth 設(shè)置，如圖所示：

然后點擊 Generate New OAuth Token，跳到自己的 GitHub Setting 頁面，生成一個 Token 就好了，如圖所示：

好了之后貼回來就 OK 了，這樣頻率限制就解除了，爽歪歪。

彩蛋

另外我還發(fā)現(xiàn)了有一個配套的 Chrome 插件，也叫 GitHub1s，大家可以自己搜索安裝：

安裝完成之后，每個 GitHub Repo 都會自動多出一個綠色按鈕，如圖所示：

點擊之后就直接跳轉(zhuǎn)到剛才所說的 github1s.com 打開這個 Repo 了，簡直不要太方便！

另外還有另外一個開發(fā)者寫的插件，效果是這樣的：

感覺這個還是挺小巧精致的，可以來這里下載：https://github.com/2293736867/Github1sExtension

總結(jié)

好了，以后看 GitHub 代碼就有新神器了，大家快去試試看吧～