One second to read GitHub code with VS Code
Tags: github, vscode, productivity, webdev
Published: 2021-02-09 16:24:16

⚠️ **Update:** this trick is outdated due to GitHub was implemented `.` keyboard shortcut to open a [web based editor](https://docs.github.com/en/codespaces/the-githubdev-web-based-editor)

---

Exists a cool trick to visualize a repository code directly on VSCode and literally, you will only need **one second**.

Just add `1s` between `github` and `.com` and press `Enter` in the browser address bar for any repository you want to read. 

![GitHub1s](https://dev-to-uploads.s3.amazonaws.com/i/fvrls0pwlgy2uvgqf1bi.gif)

But don't expect too much. It does not have editing capabilities, it's just a read-only viewer.

--- 

If one second it's too much for you, I have another cool trick up my sleeve.

> A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser.   

Drag and drop the [GitHub1s](https://github.com/conwnet/github1s) to your bookmarks bar and edit his properties using these values:

| Property | Value |
| --- | --- |
| Name: | `GitHub1s` |
| URL: | ``javascript:/^github(?:1s)?\.com$/.test(location.hostname) ? location.hostname = `github${location.hostname === 'github.com' ? '1s' : ''}.com` : location.href = location.href`` |

To use it, just click the bookmarklet when visiting a GitHub repository and it will automatically to the `github1s.com` URL. If you click it again it will come back to the `github.com` URL. In other sites reload the current URL.

![bookmarklet](https://dev-to-uploads.s3.amazonaws.com/i/1o86lpff0y6aua648mxs.gif)

Usually, the keyboard shortcut to show or hide the bookmarks bar is `ctrl+shift+B` (Windows/Linux) or `⌘+⇧+B` (macOS).

---

If you found an `x-rate-limit` or `authorization` message. You reach the rate limit quota or are trying to access a private repository.

You can create and use a [GitHub Access Token](https://github.com/settings/tokens) on `Settings -> Developer settings -> Personal access tokens` and clicking the `Generate new token` button.

> ⚠ Take care of the scope you select.  

Click on the update `Update OAuth token` option.

![x-rate-limit](https://dev-to-uploads.s3.amazonaws.com/i/2aav59bakfe6dvt6rh1p.png)

And use the previously created token.

![enter-roken](https://dev-to-uploads.s3.amazonaws.com/i/tsfbz1c1yi4s0yd7ufz3.png)

I think using this option on public repositories it's a good idea because the source code is public, but I do not think the same with private repositories. 

> ⚠ Double-check your company security policies before doing that in private repositories because you would be given access to a third party.

---

**Bonus Track**:

You also can use the [Remote Repositories](https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub-insiders) extension to open a repository directly on VS code without cloning it.

---

**Sources**: 

- [GitHub1s repository](https://github.com/conwnet/github1s). Be kind and don't forget to click ⭐.

- [GitHub1s - How it Works](https://github.com/conwnet/github1s/blob/master/docs/guide.md)

- [Reddit](https://www.reddit.com/r/programming/comments/lfpngg/explore_github_source_code_right_on_the_web/gmnkbl7/) discussion about bookmarklet.

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)