Top 5 Chrome Extensions for GitHub

Written on May 03, 2020 • 3 min read

Available in:

In this article, I'll share the Chrome extensions I use for GitHub to boost my productivity when using GitHub daily. There are many great extensions available, but I'll share the 5 Chrome extensions for GitHub that I personally use.

Octotree

This extension is extremely helpful for me. Especially for browsing files and folders since it provides a tree view, so we can quickly explore the contents of a repository, especially when browsing open source projects.

This extension also makes code review easier in pull requests (PR), because at first glance you can see what files were changed in the PR and see how many lines were changed or added. You can also see what other engineers have reviewed. You need to log in to get this feature; without logging in, you can only see all files in the repo, not specific PR details.

Refined GitHub

This extension makes GitHub's interface and workflow simpler. It adds great UX, in my opinion. For example, when you push a branch to GitHub, it shows a notification with a button to create a PR if you haven't made one yet.

As for emojis, previously GitHub would only show the emoji but not indicate who added it to your comment. With this extension, you can see who added each emoji to your comments. Simple, but handy.

Equally important, if your repository has Continuous Integration (CI) that must pass before merging, this extension provides an option to wait for all CI checks to pass before merging the branch. This is very helpful for me, since my workflow was still manual for branch merging.

Octolinker

This one helps me research and browse dependencies in a repository. This extension makes it easier to navigate through the dependencies in a repository. When you hover over import or require statements in JavaScript, if the dependency is external or from an outside library, a tooltip with info about that library appears with a link to its GitHub repository. If it's just an import from within the project, clicking it will take you to that file.

This extension supports many languages and tools like JavaScript, TypeScript, npm, Ruby, Go, etc. If you try the package.json file and link through the dependencies or devDependencies one by one, a tooltip with info about that dependency appears. Very helpful if you want to understand the dependencies of famous open source projects.

File Icon for GitHub

This extension provides different icons based on the file type. It also supports GitLab users. Why this extension? To make my GitHub look more fancy like my code editor. 😎

GitHub Dark Theme

Last is dark mode for GitHub. This is important for me because my eyes get tired quickly when viewing a very bright screen. If you combine all the extensions together, it looks like the image above.

That's my GitHub Chrome extension setup to be more productive. It all depends on individual preferences; not everyone uses the same setup.

Credits

Blog

What is Semantic Versioning (SemVer)?

When you frequently build applications using npm or yarn, you've probably wondered about many things. What is the purpose of package.json? Why do we get package-lock.json when using npm and yarn.lock when using yarn?

Getting to Know ESLint, JavaScript Linter

Lint or linter is a tool to analyze source code to mark errors, bugs, code conventions, and verify code quality.

#javascript#tools