Branch File Highlighter
A VS Code extension that highlights files in the Explorer that have been modified in the current branch compared to a target branch (e.g. main or master).
Features
- Color-coded files: Changed files show a badge and color in the Explorer sidebar
- Configurable: Choose your target branch, highlight color, and badge character
- Auto-refresh: Updates automatically when you switch branches or make commits
- Lightweight: Only activates in git repositories; minimal CPU and memory usage
Installation
Search for Branch File Highlighter in the VS Code Extensions panel (Cmd+Shift+X / Ctrl+Shift+X) and click Install.
Configuration
Open VS Code Settings (Cmd+,) and search for Branch File Highlighter, or add these to your settings.json:
| Setting |
Default |
Description |
branchFileHighlight.targetBranch |
"main" |
Branch to compare against (e.g. "main", "master", "develop") |
branchFileHighlight.color |
"purple" |
Highlight color: "red", "blue", "green", "yellow", "orange", or "purple" |
branchFileHighlight.badge |
"●" |
Badge character shown next to changed files (max 2 characters) |
branchFileHighlight.enabled |
true |
Enable or disable highlighting |
Example settings.json
{
"branchFileHighlight.targetBranch": "main",
"branchFileHighlight.color": "purple",
"branchFileHighlight.badge": "●",
"branchFileHighlight.enabled": true
}
Commands
Open the Command Palette (Cmd+Shift+P) and run:
- Branch File Highlighter: Refresh — manually re-run the git diff and update decorations
How It Works
The extension runs git diff <targetBranch>...HEAD --name-only to find files changed in your branch relative to the target. It uses VS Code's FileDecorationProvider API to add a badge and color to those files (and their parent folders) in the Explorer.
The extension watches .git/HEAD and .git/refs/ for branch switches and new commits, and refreshes automatically.
Troubleshooting
No files are highlighted
- Make sure you are inside a git repository
- Make sure you are not currently on the target branch (e.g.
main)
- Check that
branchFileHighlight.targetBranch matches your repository's base branch name
- Run Branch File Highlighter: Refresh from the Command Palette
Wrong files highlighted
- Verify the target branch setting
- Run
git diff <targetBranch>...HEAD --name-only in a terminal to confirm the expected output
Branch name not accepted
- Branch names must contain only letters, numbers, and the characters
., -, _, /
- Names containing shell special characters (
;, &, |, etc.) are rejected for security
Contributing
git clone https://github.com/YOUR_GITHUB_USERNAME/branch-file-highlighter
cd branch-file-highlighter
npm install
npm run compile
Press F5 in VS Code to launch an Extension Development Host with the extension loaded.
npm test # run tests
npm run lint # run ESLint
npm run watch # compile on save
License
MIT — see LICENSE
