高效阅读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.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的指向

相关推荐

  • 高效遍历匹配Json数据,避免嵌套循环

    工作中经常会遇到这样的需求: 1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状态 2.勾选人员后,前往别的页面,再次返回,人员依旧程勾选状态 3.等等.......

    2 年前
  • 高效的jQuery代码编写技巧总结

    最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码。

    3 年前
  • 高效的Mobx模式(Part 3 高阶应用实例)

    前两部分侧重于MobX的基本构建块。 有了这些块,我们现在可以通过MobX的角度开始解决一些真实场景。 这篇文章将是一系列应用我们迄今为止所见概念的例子。 当然,这不是一个详尽的清单,但应该让你体会...

    2 年前
  • 高效的Mobx模式 - (Part 1)

    起因 很早之前看到的一篇关于mobx的文章,之前记得是有人翻译过的,但是怎么找都找不到,故花了点时间通过自己那半桶水的英文水平,加上Google翻译一下,对于初学者,以及mobx的开发者提供些许帮...

    2 年前
  • 高效前端开发 - Visual Studio Code

    本文是根据我在公司演讲(2019年8月)的高效开发主题PPT重新总结发布的一篇文章。有兴趣了解PPT的可以前往百度网盘下载:高效开发 VSCode.pptx(https://pan.baidu.c...

    8 个月前
  • 高效使用VSCode的9点建议

    译者按: 充分利用其特性,你会觉得 VSCode 非常强大! 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 在开源 IDE 市场,最近几年 Visual St...

    1 年前
  • 链接和执行外部JavaScript文件托管在GitHub上

    AuthorProxy(https://stackoverflow.com/users/1763061/authorproxy)提出了一个问题:Link and execute external Ja...

    2 年前
  • 通过实现25个数组方法来理解及高效使用数组方法(长文,建议收藏)

    作者:Maciej Cieslar 译者:前端小智 来源: dev 为了保证的可读性,本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客(https://github.com/...

    8 个月前
  • 读《进化:从孤胆极客到高效团队》

    2016年,我从一家中型的IT公司离职,这短短一年经历了人生的起起伏伏。因为表现突出转正后从一名基层开发被领导提拔为部门前端方向负责人,所谓的技术leader。而就在我真的达到公司的事就是我的事的精神...

    1 年前
  • 详解 Github App 的玩法

    image(https://img.javascriptcn.com/8ee2bda1b962f5c4f8ece5c07608382e "image") 之前在使用 Github issues 搭建...

    1 年前

官方社区

扫码加入 JavaScript 社区