Folder Regex Color (Folder Path Color with Regex format)

Fork of Folder Path Color, but with regex paths

This extension allows you to color-code folders and files in Visual Studio Code by specifying paths regex and colors in your workspace settings. The colors are visible in the Explorer view and in the tabs, unless overridden by the app.

Works in search and tabs as well.

Features

This extension provides the ability to customize the appearance of folders in your workspace explorer. You can assign colors and symbols to folders based on their paths, and the assigned color and symbol will be displayed next to the folder name. You can also specify a tooltip for each folder, which will be displayed when you hover over the folder's symbol.

There are 20 slots for custom colors available, which you can update with the workbench.colorCustomizations user setting.

[!NOTE] It's important to note that when a file is under source control and there are changes to be committed, Git will overwrite the file's color with its own color scheme. However, the symbol assigned by this extension will remain visible next to the file name. The custom color will still be shown for folders with Git changes.

In the source control tab, custom colors on files won't be visible due to VS Code's design, but the symbol will still be displayed next to the file name, providing a visual cue even in this scenario.

Example Configuration

// VS Code User Config
"folder-regex-color.folders": [
    {
      "regex": ".*test.ts$",
      "color": "custom1"
    },
    {
      "regex": "src/app$",
      "color": "custom2"
    },
    {
      "regex": "src/components$",
      "color": "custom3"
    },
    {
      "regex": "src/lib$",
      "color": "custom4"
    },
    {
      "regex": "src/utils$",
      "color": "custom5"
    }
  ],
  "workbench.colorCustomizations": {
    // Folder Regex Plugin
    "folderRegexColor.custom1": "#31e2cd",
    "folderRegexColor.custom2": "#ff0000",
    "folderRegexColor.custom3": "#ffc23d",
    "folderRegexColor.custom4": "#8ee414",
    "folderRegexColor.custom5": "#FF88CC"
  }

Requirements

This extension does not have any additional requirements or dependencies.

Extension Settings

• folder-regex-color.folders: An array of objects representing the folders to be colored. Each object can have the following properties:

Predefined color names: blue, magenta, red, cyan, green, yellow, and custom1 through custom20.

Example configuration:

"folder-regex-color.folders": [
    { "regex": "frontend", "symbol": "⚛️", "tooltip": "Frontend Source", "color": "custom1" },
    { "regex": "packages/common", "symbol": "📦", "tooltip": "Common Packages", "color": "custom2" }
]

• folderRegexColor: A color object with 20 slots to use for custom HEX codes. Used under the workbench.colorCustomizations user setting.

Example configuration with custom colors:

"workbench.colorCustomizations": {
    "folderRegexColor.custom1": "#FF4488",
    "folderRegexColor.custom2": "#88ff44",
    "folderRegexColor.custom3": "#4488FF",
    "folderRegexColor.custom4": "#FF88CC",
    "folderRegexColor.custom5": "#88FFAA"
}

Following extension guidelines

This extension follows the Extension Guidelines provided by Visual Studio Code.

Enjoy!