高效阅读Github源代码

8,413 阅读1分钟
原文链接: zhuanlan.zhihu.com

三种办法。如果你主要看前端项目的代码,直接看第三种。

1,用Chrome插件Octotree,左侧会出现树形结构,方便你浏览源代码。

地址:

chrome.google.com/webstore/de…

类似的插件还有Sourcegraph:

地址:

chrome.google.com/webstore/de…

2,用Github Desktop桌面应用。方便把代码clone到本地,然后进行各种git操作。

Github Desktop地址:

Simple collaboration from your desktop

至于为什么不提SourceTree,是因为我的题目是高效阅读Github源代码,Github Desktop是官方提供用来操作Github的工具。虽然当然并不仅限于Github上托管的git库,但是用于Github毕竟更方便。

3,如果你开发前端(Angular,React,ES6,Typescipt),那么最推荐这种方式!直接把Chrome变成一个在线IDE。帮你把npm包都准备好,直接可以运行。

只要把github地址改成stackblitz.com/github开头就可以了。

例如下面视频中,Github项目地址是

https://github.com/gothinkster/angular-realworld-example-app

改成

https://stackblitz.com/github/gothinkster/angular-realworld-example-app

Stackblitz官方地址:

Online VS Code IDE for Modern Web Applications

Stackblitz可以算是一个在线VS Code,关于Stackblitz等多内容可以看:

blog.angular.io/run-angular… medium.com/@ericsimons…

如果你觉得修改URL还是太麻烦,那么看这里:

NG-NOW

拖拽左上角的图标成为Bookmark,以后只需要访问Github上的Angular项目,然后点击书签就可以了。

最后想说,用Stackblitz配合GitHub Pages开发个人主页什么的,那简直是太绝配了!!!你们想到了没有?

GitHub Pages

--------------------------------------------------------

评论区有人指出第三种方法只适用于@angular/cli创建的项目,我试了一下,确实是:

但是在官方文档里是这么写的:

Yup, you can point directly at Github repos containing Angular/React projects and it'll automatically pull them down & run them.
Documentation - StackBlitz

所以React的项目,敬请期待吧!