高效阅读Github源代码

2018-05-01

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

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

地址:

https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc​chrome.google.com

类似的插件还有Sourcegraph:

地址:

https://chrome.google.com/webstore/detail/sourcegraph/dgjhfomjieaadpoljlnidmbgkdffpack?utm_source=chrome-ntp-icon​chrome.google.com

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

Github Desktop地址:

Simple collaboration from your desktop​desktop.github.com图标

至于为什么不提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.com图标

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

https://blog.angular.io/run-angular-cli-repos-directly-in-your-browser-41332fd80901​blog.angular.iohttps://medium.com/@ericsimons/stackblitz-online-vs-code-ide-for-angular-react-7d09348497f4​medium.com

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

NG-NOW​jdjuan.github.io

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

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

GitHub Pages​pages.github.com图标


评论区有人指出第三种方法只适用于@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​stackblitz.com图标

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

原文链接:zhuanlan.zhihu.com

上一篇:前端每日实战4月份汇总(共8个项目)
下一篇:【js】《JavaScript设计模式与开发实践》——this的指向
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部