百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

每个开发者都应该掌握的GitHub奇技淫巧

zhezhongyun 2025-02-19 14:42 27 浏览


现在除了云技术之外,最深入码农农心估计就数Git和GitHub了。这成了每一个技术人员的日常,commit push到Github成了我们日常生活不可分割的一部分。那么,使用Github有啥奇技淫巧呢?好多人可能想知道这个。最近Github博客频道发布了GitHub市场产品经理十年开发工程师Lee Reilly的博文,给我们总结了使用GitHub中的技巧,让我们一起来学习吧。

文件模糊查询

大家可能没有注意到,GitHub提供了文件的模糊查询的。在任何仓库中都以访问它,输入要查找的文件的名称。这是一个非常有用的功能,可以帮助我们迅速发现要找文件所在。以查找Rails项目并快速寻找对schema.rb应用程序为例:

轻松浏览文件和目录

说到搜索文件, Octotree的浏览器扩展(GitHub/ovity/octotree)可以帮助我们浏览目录,并使用我们所熟悉的树状层级结构打开文件:

优点:支持与GitHub Enterprise works一起使用

注:几年前,Lee和作者有关支持GitHub Enterprise的信息。

如果要为GitHub构建浏览器扩展,并希望确保它适用于GitHub Enterprise,则可以通过加入GitHub Developer Program获得开发人员许可证。(也算一个干货小技巧)

收到新通知的警报

关于浏览器扩展主题,有一个扩展notifier-for-github (
GitHub/sindresorhus/notifier-for-github),可以在工具栏项目上的醒目图告知正在等待多少GitHub通知。如果无法正常显示,可以启用桌面通知。

它还适用于GitHub Enterprise。您要做的就是更改API接口匹配实例的URL。

让@信息脱颖而出

无论精心设置了多少邮件通知规则或者过滤器,难免会有漏网之鱼。有一个扩展
github-mention-highlighter(
GitHub/benbalter/github-mention-highlighter)可以突出显示了对名字的所有引用。即使是在文字墙中,或者当快速浏览评论时,也能看到一眼就发现所有@信息。

链接到代码行

这个技巧不算太隐秘,但是并非所有人都知道。在查看文件时单击行号来链接到特定的代码行。默认情况下行号(例如#L1337)被附加到URL,会直接连接到这一行行。

如果该文件被编辑,删除或重命名,该链接将不能再按预期工作。这时可以按y或单击Copy permalink来生成将始终有效的规范URL。

还可以通过按住SHIFT并选择开始和结束行的链接范围。

额外的好处:如果在GitHub注释中添加代码段链接,则会显示漂亮可视化代码显示。

MD文档技巧

GitHub Flavored Markdown非常适合文本和基本表的原始格式设置,但有时您需要发挥创造力,使其能够按您想要的方式工作。

键盘标签

可以使用 标签使文本看起来像按钮,这与常规反引号文本略有不同。非常适合在README或者Wiki中记录诸如键盘快捷键或游戏控件之类的内容。

Press W to go up, and A to go down.

If you can find the ESC, pressing that will fire missiles


十六进制代码可视化

将十六进制颜色放在反引号中会自动渲染出该颜色六角形图块。

GitHub contribution graph colors: `#C6E48B` `#7AC96F` `#249A3C` `#196127`

Diff可视化

可以使用反引号对diff可视化,会根据需要突出显示diff内容红色或绿色的线。

```diff

10 PRINT "BASIC IS COOL"

- 20 GOTO 11

+ 20 GOTO 10

```


实际上,如果在打开三个反引号之后添加了语言,则会相应地用该语言突出渲染显示代码的语法。

大段描述技巧

添加冗长的错误日志或冗长程序输出的错误信息有助于问题的解决,但如果它占用了页面大量的空间,可以考虑使用

标签。

Having some problems firing up the laser.

Click here to see terminal history + debug info

488 cd /opt/LLL/controller/laser/

489 vi LLLSDLaserControl.c

490 make

491 make install

492 ./sanity_check

493 ./configure -o test.cfg

494 vi test.cfg

495 vi ~/last_will_and_testament.txt

496 cat /proc/meminfo

497 ps -a -x -u

498 kill -9 2207

499 kill 2208

500 ps -a -x -u

501 touch /opt/LLL/run/ok

502 LLLSDLaserControl -ok1

使文字和图像居中

在2020的今天,将网页中的所有内容居中仍然是一个很好的实践经验。有一个标签

[ 你的内容]
。比如,非常适合将徽标放在仓库的自述文件中居中,可以用:

This is some centered text.

较小的文字

标记中换行可以使其变小。非常适合在图像下添加"图1:描述"之类的内容,或者使表中的文本变小以使其不会水平滚动。


Fig 1: Megatocat into action

View more octocats on the [Octodex](octodex.github.com/)!

至此,我们基本上已经回到90年代了,它具有良好的老式手工制作HTML。就像当初使用记事本和Netscape Navigator进行此操作的人一样,我对此表示满意。

魔术Markdown表?

Table-magic(stevecat.net/table-magic/)是在Markdown中用于构建和维护复杂表格的利器。这个开源工具可让我们轻松,快速地在多种表格格式之间转换,包括CSV,TSV,Markdown,SQL和HTML。可以用以内置形式编写表格,然后简单地复制并粘贴markdown。

专题标签的URL技巧

GitHub UI提供了供一种按主题和语言筛选的方法仓库(例如,搜索所有分类为#game JavaScript的仓库)。查看两个主题组合的搜索结果的唯一方法是通过一些URL技巧。只需通过?q=[TOPIC]在主题URL后面附加一个即可组合两个主题的结果。比如:

所有带有#covid-19和#visualization标记的仓库:GitHub

/topics/covid-19?q=visualization

所有标记为#chrome-extension和#github的仓库:GitHub /topics/chrome-extension?q=github

所有标记为#unity和#shader的仓库:GitHub /topics/unity?q=shader

所有标记为#minecraft和#mod的仓库:GitHub/topics/minecraft?q=mod

给仓库添加专题标签可帮助人们发现专题,甚至为专题做出贡献?在仓库中添加专题标签非常简单:只需在仓库介绍前面单击按钮并输入一些与项目目的和专题关键字即可。?

黑暗主题

有些小伙伴可能会对黑暗主题感兴趣,有一个非官方的GitHub Dark Theme浏览器扩展(
GitHub/StylishThemes/GitHub-Dark)。它可与Chrome,Firefox,Opera和Safari配合使用,有黑暗主题控的可以尝试:

仓库贡献统计

有时,分析仓库的元数据并提取指标很有用(或很有趣)。希望没有人判断他们进行了多少次提交,但是可以使用git shortlog -sn命令行可以按照提作者交数统计的贡献大小列表。

git shortlog -sn


3164 Stanley Goldman

1549 Andreia Gaita

195 Don Okuda

191 Emil "AngryAnt" Johansen

15 Meaghan Lewis

9 Lee Reilly

8 Sarah Guthals

7 Sam Christiansen

7 Mauro Palumbo

6 Marcus Christensen


还可以使用排除合并提交git shortlog -sn --no-merges。

如果统计对象是公共仓库,则GitHub High Scores(
leereilly.net/github-high-scores)能提供仓库贡献者的老式8位类似街机的样式视图。非常适合炫酷,打印出来以固定在办公室的公告栏或冰箱上。

以上只是对提交内容的统计,对应到代码行数呢?相对比提交数这可能是一个更重要的指标。有大量简洁的CLI项目可帮助我们分析Git数据。

有一个工具git-quick-stats
GitHub/arzzen/git-quick-stats)很好地统计总结仓库活动。甚至可以按天,小时和月查看贡献信息。

git-quick-stats


Stanley Goldman :

insertions: 1800 (1%)

deletions: 1455 (1%)

files: 221 (2%)

commits: 108 (3%)

lines changed: 3255

first commit: Thu Apr 6 09:33:53 2017 -0700

last commit: Fri Jul 27 14:14:51 2018 -0400

另一个工具git-fame(GitHub/casperdcl/git-fame)统计贡献信息时候,包括了代码行。

git-fame


git-stats
GitHub/IonicaBizau/git-stats)统计信息包括了各种有趣的数据,包括贡献百分比和一个精美的ascii饼图。

摩尔斯电码训练

最后但并非最不重要的一点……您是否梦想过一种锻炼身体和练习莫尔斯电码的方法?有一个工具veggiedefender(GitHub/veggiedefender)可让我们通过反复关闭笔记本电脑来生成莫尔斯电码,并附带一些非常的功能列表。健身和信息发送两不误:

相关推荐

JavaScript中常用数据类型,你知道几个?

本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型,当然这并不是JavaScr...

踩坑:前端的z-index 之bug一二(zh1es前端)

IE6下浮动元素bug给IE6下的一个div设置元素样式,无论z-index设置多高都不起作用。这种情况发生的条件有三个:1.父标签position属性为relative;2.问题标签无posi...

两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:HTM...

前端代码需要这样优化才是一个标准的网站

  网站由前端和后端组成,前端呈现给用户。本文将告诉您前端页面代码的优化,当然仍然是基于seo优化的。  就前端而言,如果做伪静态处理,基本上是普通的html代码,正常情况下,这些页面内容是通过页面模...

网页设计如何自学(初学网页设计)

1在Dreamweaver中搭建不同的页面,需要掌握HTML的语句了,通过调整各项数值就可以制作出排版漂亮的页面,跟着就可以学习一些可视化设计软件。下面介绍网页设计如何自学,希望可以帮助到各位。Dre...

1、数值类型(数值类型有)

1.1数据类型概览MySQL的数据类型可划分为三大类别:数值类型:旨在存储数字(涵盖整型、浮点型、DECIMAL等)。字符串类型:主要用于存储文本(诸如CHAR、VARCHAR之类)。日期/...

网页设计的布局属性(网页设计的布局属性是什么)

布局属性是网站设计中必不可少的一个重要的环节,主要用来设置网页的元素的布局,主要有以下属性。1、float:该属性设置元素的浮动方式,可以取none,left和right等3个值,分别表示不浮动,浮在...

Grid网格布局一种更灵活、更强大的二维布局模型!

当涉及到网页布局时,display:flex;和display:grid;是两个常用的CSS属性,它们都允许创建不同类型的布局,但有着不同的用法和适用场景。使用flex布局的痛点当我们使...

React 项目实践——创建一个聊天机器人

作者:FredrikStrandOseberg转发链接:https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-react/前言...

有趣的 CSS 数学函数(css公式)

前言之前一直在玩three.js,接触了很多数学函数,用它们创造过很多特效。于是我思考:能否在CSS中也用上这些数学函数,但发现CSS目前还没有,据说以后的新规范会纳入,估计也要等很久。然...

web开发之-前端css(5)(css前端设计)

显示控制一个元素的显示方式,我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和...

2024最新升级–前端内功修炼 5大主流布局系统进阶(分享)

获课:keyouit.xyz/14642/1.前端布局的重要性及发展历程前端布局是网页设计和开发的核心技能之一,它决定了页面元素如何组织和呈现。从早期的静态布局到现代的响应式布局,前端布局技术经历了...

教你轻松制作自动换行的CSS布局,轻松应对不同设备!

在网页设计中,自动换行的CSS布局是非常常见的需求,特别是在响应式设计中。它可以让网页内容自动适应不同屏幕尺寸,保证用户在不同设备上都能够获得良好的浏览体验。本文将介绍几种制作自动换行的CSS布局的方...

晨光微语!一道 CSS 面试题,伴你静享知识治愈时光

当第一缕阳光温柔地爬上窗台,窗外的鸟鸣声清脆悦耳,空气中弥漫着清新的气息。在这宁静美好的清晨与上午时光,泡一杯热气腾腾的咖啡,找一个舒适的角落坐下。前端的小伙伴们,先把工作的疲惫和面试的焦虑放在一边,...

2023 年的响应式设计指南(什么是响应式设计优缺点)

大家好,我是Echa。如今,当大家考虑构建流畅的布局时,没有再写固定宽度和高度数值了。相反,小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议,小编仍然看到网站遵循自适应设计模式,其中它有...