Skip to content

ybentz/color-tabs-vscode

 
 

Repository files navigation

Logo

ColorTabs for vscode

MarketplaceVersion MarkerplaceDownloads

Title background

What's new

[0.5.0]

  • ColorTabs can now add a label to your title background as well - PR #4.
    set colorTabs.titleLabel to true in your workspace settings to get this new feature. Example (with mobile label): Title label

[0.4.4]

  • ColorTabs can now color your title background as well - PR #2.
    set colorTabs.titleBackground to true in your workspace settings to get this new feature. Example: Title background

Common Use Cases

  1. Working on a monorepo, this extension can help you quickly understand if the current file is where you want to be.

For example your repo has both server and client, so this extension will color the client file tabs in one color, and the server file tabs in another.

Another use case is for repos that have both reactJS and react-native files. Many times the files have the same names but are just in different directories like:

mobile/Component.tsx
web/Component.tsx

With this extension you can easily differntiate between the two.

  1. Accidentaly writing code in build/auto-generated files -
    Sometimes you start writing in some file and realize its an auto-generated file that will get over-written. Frustrating right? Try this plugin with this regex:
"colorTabs.config": [
        {
            "regex": ".*\/build\/.*",
            "color": "#FF0000"
        }
    ]
"colorTabs.titleBackground": true    

And BOOM - your build files are now in red. No more mistakes!

Extension Settings

This extension contributes the following settings:

  • colorTabs.config: list of mappings from path to color
    "default": [{"regex": "./web/.", "color": "#ff0000"},{"regex": "./mobile/.", "color": "#00ff00"}],

  • colorTabs.titleBackground: Enable title background coloring. default to false

A workspace.settings example :

"colorTabs.config": [
        {
            "regex": ".*\/mobile\/.*",
            "color": "#FF0000",
            "label": "MOBILE",
        },
        {
            "regex": ".*\/web\/.*",
            "color": "#00FF00",
            "label": "WEB",
        },{
            "regex": ".*\/docs\/.*",
            "color": "#0000FF",
            "label": "DOCS",
        },
    ]
"colorTabs.titleBackground": true    

About

Changes the active tab background color based on an array of regex - perfect for working on monorepos or web+native repos

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%