Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Visually Organize Applications in VS Code with Window Color-Coding

    vscodeVS Code

    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.

    An example configuration for this color coding:

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