[VSCode] Visually Organize Applications in VS Code with Window Color-Coding

When working in a codebase that has frontend, backend, middleware, service, and other concerns all in the same GIT repository, it can be helpful to color-code your editor windows to quickly recognize in what area of your stack you are working.

We can easily do this with a few VS Code settings in the .vscode/settings.json file in a directory. We can then open those directories in new VS code windows and visually see the difference between our frontend code and our backend code, eliminating cognitive overhead and context switching between, for example, ReactJS and NodeJS.

 

In Frontend folder, create .vscode folder, add file settings.json:

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#663399"
  }
}