↑↑↑關(guān)注后"星標(biāo)"簡(jiǎn)說(shuō)Python
人人都可以簡(jiǎn)單入門Python、爬蟲、數(shù)據(jù)分析
?簡(jiǎn)說(shuō)Python推薦?
來(lái)源/崔慶才丨靜覓
作者?/?崔慶才

給大家介紹一個(gè)非常實(shí)用的工具，有了它，我們可以在幾秒之內(nèi)用 VS Code 打開 GitHub 上的任意一個(gè) Repo，無(wú)需 Clone，速度飛快。

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

介紹

比如這里是 Scrapy 的倉(cāng)庫(kù)：https://github.com/scrapy/scrapy，用 GitHub 打開是這樣的：

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

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

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

現(xiàn)在好了。

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

沒錯(cuò)，就是這么簡(jiǎn)單好記。

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

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

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

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

Cmd/Ctrl + F 搜索：

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

有的朋友可能會(huì)問，代碼能修改嗎？

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

原理

另外有的朋友可能好奇這個(gè)的實(shí)現(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.

”

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

那作者基于這個(gè)做了什么事呢？

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

如此，GitHub1s 就誕生了。

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

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

訪問頻率限制

另外作者也提到了一點(diǎn)：

“

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.

”

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

這里的頻率限制我解讀下，有朋友可能好奇，因?yàn)檫@個(gè)網(wǎng)站是 github1s.com 來(lái) serve 的，所以請(qǐng)求是不是都是 github1s.com 這個(gè)服務(wù)器發(fā)出來(lái)的呢？所以不同的人其實(shí)都是用的一個(gè) IP？

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

但是請(qǐng)求 GitHub 的 API 沒有跨域問題嗎？

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

access-control-allow-origin:?*

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

OK，說(shuō)回解除頻率限制的問題：

“

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

”

這里說(shuō)如果登錄了，每小時(shí)就可以提高到 5000 次請(qǐng)求了。

怎么設(shè)置呢？

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

然后點(diǎn)擊 Generate New OAuth Token，跳到自己的 GitHub Setting 頁(yè)面，生成一個(gè) Token 就好了，如圖所示：

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

彩蛋

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

安裝完成之后，每個(gè) GitHub Repo 都會(huì)自動(dòng)多出一個(gè)綠色按鈕，如圖所示：

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

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

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

總結(jié)

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

長(zhǎng)按掃碼關(guān)注，一起學(xué)Python

學(xué)習(xí)更多：
整理了我開始分享學(xué)習(xí)筆記到現(xiàn)在超過250篇優(yōu)質(zhì)文章，涵蓋數(shù)據(jù)分析、爬蟲、機(jī)器學(xué)習(xí)等方面，別再說(shuō)不知道該從哪開始，實(shí)戰(zhàn)哪里找了