At work we use GitHub Code Owners to define ownership for files in our shared React application.

GitHub.com automatically displays code ownership information for each file, but in VSCode, we need an extension to show this same information. The existing GitHub code owners extensions all had problems, so I forked one to make it my own.

fixing bugs

There were some bugs with the extension I forked.

The underlying codeowners NPM library didn’t correctly implement the GitHub code owners syntax, so I found a more compliant library: @snyk/github-codeowners

I also forked the Snyk library to handle inline comments and updated the syntax file to highlight inline comments.

updating the user experience

I wanted the extension to match the look and feel of GitHub.com’s code owners as much as possible.

So I updated the status bar to use a shield icon that matched the GitHub.com UI. Also, when you click the status bar item, VSCode opens to the corresponding line in the CODEOWNERS file.

code owners in status bar

The usernames in the code owners file are now clickable links to the related GitHub.com user or team. So it’s quick to find a code owner on GitHub.com.

code owners syntax

It took me a while to find the VSCode API to support this behavior, but VSCode’s LinkProvider API was quick to get working once I found the API.

install GitHub Code Owners

Install GitHub Code Owners on the VSCode marketplace or check out the repository on GitHub.