VS Code Extension: VSChameleon

Context

I have been working on an nx monorepo recently and I wanted a visual way to distinguish when you are in different parts of the codebase.
I also fancied learning how VS Code extensions work and pushing something working but bitesize to prod on a Sunday afternoon.

The Problem

It sounds trivial, but creating a mental association between a IDE colour scheme and a particular part of your codebase is a powerful and underused hack for decreasing the mental overhead of development.
When first getting to grips with a codebase, you need to keep multiple patterns in your head for different areas. Especially when working with a monorepo setup which contains several packages, understanding instantly through visual feedback that the index.ts file you just opened was inside the “ui" package–rather than the “core"–where you may be following different patterns, can easily save you a lot of time.

The Solution

You can find and install the extension here.
notion image

Learnings

  • Setup a repo ready for development with npx yo code (docs).
  • The code structure reminds me of a Chrome plugin, with a src/activate.ts and src/extension.ts as defined entry points.
  • The developer experience isn’t bad for developing something simple, given it’s a quick setup. VS Code has built-in tooling for testing your code (just run Debug: Start Debugging from the command palette).
  • Publishing the extension is a similar experience to publishing an npmjs package (run vsce package && vsce publish) (docs).
    • You need to connect to Azure DevOps and get a Personal Access Token to authenticate.

The Code

You can find the code here.