These GitHub shortcuts have saved hours of manual work and poking around interfaces to find the information I need.
Furthermore, they help me write better issues and pull requests, with more info, in less time.
GitHub tips and tricks, a thread 🧵
Furthermore, they help me write better issues and pull requests, with more info, in less time.
GitHub tips and tricks, a thread 🧵
⭐ Finding files
Pressing "t" within a repository will open a file finder that filters files as you type.
This file-finder is a "fuzzy finder, " meaning you don't necessarily have to know the exact name of the file you want to find.
Pressing "t" within a repository will open a file finder that filters files as you type.
This file-finder is a "fuzzy finder, " meaning you don't necessarily have to know the exact name of the file you want to find.
⭐ Displaying keyboard keys
Wrapping text into <kbd> tags will display text as "keys" in issues, pull-requests, and markdown files within GitHub.
To tell someone they should press the key A, for example, you could write <kbd>A</kbd>.
Wrapping text into <kbd> tags will display text as "keys" in issues, pull-requests, and markdown files within GitHub.
To tell someone they should press the key A, for example, you could write <kbd>A</kbd>.
⭐ Displaying colors for hex codes
Wrapping hex codes into backticks (`) will cause a box with the code's color to be rendered right next to its code.
To render the color red, for example, you could use `#FF0000`.
Wrapping hex codes into backticks (`) will cause a box with the code's color to be rendered right next to its code.
To render the color red, for example, you could use `#FF0000`.
⭐ Linking to a range of lines
To create a link to a particular range of lines, you can click on the line number at the beginning of the range and then hold shift while clicking the last line in the range.
To create a link to a particular range of lines, you can click on the line number at the beginning of the range and then hold shift while clicking the last line in the range.
Doing that will cause GitHub to append the line range to the URL in your address bar.
If you've selected lines 10 to 20, for example, your URL will end with #L10-L20.
As I'll show next, generating URLs for line ranges is helpful for including snippets into issues and PRs.
If you've selected lines 10 to 20, for example, your URL will end with #L10-L20.
As I'll show next, generating URLs for line ranges is helpful for including snippets into issues and PRs.
⭐ Generating perma-links to a file at a particular point in time
If you go to a repo's file and copy the link on your address bar, it will look something like:
github.com/user/repo/blob…
If you go to a repo's file and copy the link on your address bar, it will look something like:
github.com/user/repo/blob…
The problem with this link is that file.md might be deleted or renamed.
If that happens, your link will end up pointing to nowhere!
➡️ To get a permanent link to https://t.co/oBfShT4PGw at the current time, press "y"!
If that happens, your link will end up pointing to nowhere!
➡️ To get a permanent link to https://t.co/oBfShT4PGw at the current time, press "y"!
Pressing "y" will change the URL in your address bar to include the commit's hash (its unique identifier).
Now, your link should look like this:
github.com/user/repo/blob/<SHA>/file.md
This link will *always* point to file.md at that point in time.
Now, your link should look like this:
github.com/user/repo/blob/<SHA>/file.md
This link will *always* point to file.md at that point in time.
Using "y" to include the commit's SHA in a URL also helps you have stable references to a particular range of lines.
Imagine you have sent a colleague a link to a file's first 10 lines, for example.
Imagine you have sent a colleague a link to a file's first 10 lines, for example.
If those 10 lines change before your colleague clicks the link, the 10 lines they will see will be different from the 10 lines you've seen when you sent them the link.
Pressing "y" before copying a URL solves that problem.
Pressing "y" before copying a URL solves that problem.
⭐ Including native code snippets in issues and PRs
To include GitHub code snippets into issues and PRs, select a range of lines, press "y" to obtain a perma-link, and paste that perma-link into your issue/PR.
GitHub will render that link within a code-snippet box.
To include GitHub code snippets into issues and PRs, select a range of lines, press "y" to obtain a perma-link, and paste that perma-link into your issue/PR.
GitHub will render that link within a code-snippet box.
⭐ Toggling comments on and off on pull-requests
When pull requests get too busy, I often find it hard to read the code with all those commends in the middle of it.
Pressing "i" toggles comments on and off so you can focus on what matters.
When pull requests get too busy, I often find it hard to read the code with all those commends in the middle of it.
Pressing "i" toggles comments on and off so you can focus on what matters.
⭐ Viewing who changed what (blame) within GitHub
Pressing "b" while viewing a file will show you who changed which lines (git blame).
You can use this feature to easily find the PR in which changes were introduced and, therefore, obtain more context about an issue.
Pressing "b" while viewing a file will show you who changed which lines (git blame).
You can use this feature to easily find the PR in which changes were introduced and, therefore, obtain more context about an issue.
To find which PR introduced a change, start by pressing "b" on the page for the file which contains the changes.
Then, click the commit that modified the desired line range.
Finally, click the PR link on the left of the summary message, as shown in the gif above.
Then, click the commit that modified the desired line range.
Finally, click the PR link on the left of the summary message, as shown in the gif above.
⭐ Collapsable long pieces of information
Whenever you have long pieces of information, such as log samples or stack traces, consider using a collapsable box to allow readers to show and hide information as they wish.
Whenever you have long pieces of information, such as log samples or stack traces, consider using a collapsable box to allow readers to show and hide information as they wish.
To create a collapsable box like the one above, you'll have to use the <details> tag to wrap all of your content.
Within <details>, add a callout for the box using the <summary> tag.
Finally, paste the content for the box within a <pre> tag.
Within <details>, add a callout for the box using the <summary> tag.
Finally, paste the content for the box within a <pre> tag.
That's a wrap!
If you liked this thread:
1. Follow me @thewizardlucas for more of these
2. RT the tweet below to share this thread 👇
If you liked this thread:
1. Follow me @thewizardlucas for more of these
2. RT the tweet below to share this thread 👇
https://twitter.com/thewizardlucas/status/1536602847348924416
• • •
Missing some Tweet in this thread? You can try to
force a refresh
