Grey Out Files

Keep your Explorer focused by fading files you rarely need to interact with.

Grey Out Files automatically greys out files and folders in the Visual Studio Code Explorer based on configurable glob patterns. It's perfect for de-emphasizing configuration files, lockfiles, generated folders, and other items that add visual clutter without hiding them.

Features

• 🎨 Greys out matching files and folders in the Explorer.
• ⚙️ Fully configurable using glob patterns.
• 🔄 Updates automatically when your configuration changes.
• 👀 Keeps important files visible while making less relevant ones less distracting.
• 🚀 Lightweight with no commands or setup required.

Default Patterns

The extension includes sensible defaults for commonly de-emphasized files and folders, including:

• Environment files (.env, .env.*)
• Dependency lockfiles (package-lock.json, pnpm-lock.yaml, yarn.lock)
• TypeScript configuration files
• ESLint and Prettier configuration
• package.json
• node_modules
• Build output folders (out)
• VS Code workspace files (*.code-workspace)

Configuration

Configure the files and folders to grey out by editing your VS Code settings:

{
  "greyFiles.patterns": [
    "**/.env",
    "**/package-lock.json",
    "**/node_modules",
    "**/out",
    "**/*.code-workspace"
  ]
}

The setting accepts any valid glob pattern.

Example

{
  "greyFiles.patterns": [
    "**/*.log",
    "**/coverage",
    "**/dist",
    "**/.github",
    "**/*.snap"
  ]
}

Why use this?

Unlike hiding files with files.exclude, Grey Out Files keeps everything visible while making less important files blend into the background. This helps you:

• Reduce visual clutter.
• Keep project configuration files accessible.
• Draw attention to the files you work on most often.

Perfect for large projects where you want a cleaner Explorer without losing visibility of important project files.