高效阅读Github源代码

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

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.io https://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的项目，敬请期待吧！