My first Visual Studio Code extension - Git Status Backgrounds (GitStatusBg)

tldr: get it from here and try it out.

I was part of an email discussion about changes that could be added or made to Windows to make it better for developers.

Someone said they wished that Visual Studio (VS) and Visual Studio Code (VSCode) could use different color backgrounds for different projects in a solution.

I know how to build an extension that identifies files from different projects and how to change the background color of the editor, so I reached out to them to understand exactly what they were after.

Upon reflection, they decided that what would help them the most would be if VSCode could better indicate the git status of the file they were working on. They were writing docs and each stage of the documentation was a new file that built upon what was their already. For each new stage, they'd add a new file that was based on the previous step and make the changes there. The problem was that having lots of similar files meant that it was easy to accidentally change the wrong one.

What they wanted was a way to easily identify the new (untracked) files--as they are the ones they will be writing in, and any modified files--as that means they're changing something that already exists.

That's not what I was expecting, nor was it what I was thinking about, but I was intrigued.

I've made lots of extensions for VS but none for VSCode.

For a while, I've wanted to branch out and this seemed like a good opportunity.

I hoped that what I know about building extensions for VS will help with building them for VSCode.

It didn't.

The only thing I've learned building extensions for VS that applied to VSCode was to be persistent and search broadly to find out how to do certain things.

The extension I've made is very simple but in creating it I had to learn a number of things:

• how to build a basic extension
• how to respond to opening and switching between documents
• how to apply visual changes to a document
• how to get the git status of a file (much harder to work out than I expected)
• how to share functionality between different extensions
• how to work with configurable settings in an extension

In places, the VSCode documentation was better than for VS, but in others, it was also quite lacking.

I think the problem with creating documentation for extensibility features is that its necessary to assume a lot about the person doing the development and the documentation needs to be fairly abstract as every extension that is built will be different.

Anyway, if you're considering building an extension for VS or VSCode I highly recommend supplementing the official docs by searching for opensource code that does something similar and learn from that. It's one of the reasons that I share all my extension code on GitHub.

So, what did I build?
This:

Notice the subtle background tinting of the two open documents.

It colors the background of open documents if the are untracked or have been modified. The colors are customizable but the default matches the colors used in the Explorer and Source Control panels.

Hopefully, with this installed, fewer edits will now be made to the wrong documents. Or any edits in the wrong document will now be spotted sooner.

Get it from the marketplace