Explorer Views

Switch between predefined file filter views in VS Code Explorer. Focus on different parts of your codebase by dynamically showing/hiding folders and files.

Features

• Quick View Switching: Use Command Palette to instantly switch between configured views
• Workspace-Specific: Define different views for each project in workspace settings
• No Window Reload: View changes happen instantly without disrupting your workflow, terminals, or coding agent sessions
• Gitignore Integration: Automatically apply patterns from .gitignore file to any view
• Coding-Agent-Friendly: Views are stored in .vscode/settings.json, making them easy for coding agents to read and modify

Usage

1. First Time Setup:

   • Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
   • Type "Switch File View" and press Enter
   • Click "Add Examples" to create starter views in your workspace settings

2. Switching Views:

   • Open Command Palette
   • Type "Switch File View"
   • Select the view you want to activate

3. Customizing Views:

   • Open workspace settings (.vscode/settings.json)
   • Modify the explorerViews.views array
   • Each view has a name and filters object

Example Configuration

Add this to your .vscode/settings.json:

{
  "explorerViews.views": [
    {
      "name": "Full View",
      "filters": {}
    },
    {
      "name": "Hide Dependencies",
      "gitignore": true,
      "filters": {
        "**/node_modules": true,
        "**/dist": true,
        "**/out": true,
        "**/.git": true
      }
    },
    {
      "name": "Frontend Focus",
      "filters": {
        "**/backend": true,
        "**/api": true,
        "**/node_modules": true,
        "**/.git": true
      }
    },
    {
      "name": "Backend Focus",
      "filters": {
        "**/frontend": true,
        "**/public": true,
        "**/node_modules": true,
        "**/.git": true
      }
    }
  ]
}

How It Works

The extension updates the files.exclude workspace setting when you switch views. Patterns set to true are hidden from the Explorer.

Gitignore Integration

When you enable "gitignore": true on a view, the extension:

1. Reads your workspace's .gitignore file
2. Converts gitignore patterns to VS Code glob patterns
3. Merges them with your custom filters (custom filters take precedence)
4. Applies the combined filters to the Explorer

This is useful for automatically hiding all files and folders that are already ignored by git, without having to manually duplicate those patterns in your view configuration.

Tips

• Create project-specific views based on your actual folder structure
• Use glob patterns like **/ to match at any depth
• Leave filters empty ({}) for a "show everything" view
• Enable "gitignore": true to automatically hide gitignored files
• Ask your coding agent to create or modify views for you!

Extension Settings

This extension contributes the following settings:

• explorerViews.views: Array of view definitions with name and filters

Development

Building & Testing

# Compile TypeScript
npm run compile

# Watch mode (auto-compile on changes)
npm run watch

# Run linter
npm run lint

# Run tests
npm test

Testing the Extension

1. Press F5 to launch the Extension Development Host (separate VS Code window)
2. In that window, press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
3. Type "Switch File View" and press Enter
4. If no views are configured, click "Add Examples" to create starter views
5. Select a view to test the filtering

After making code changes, reload the Extension Development Host with Ctrl+R (or Cmd+R).

Architecture

Entry Point: src/extension.ts

The main extension file:

1. Registers the explorer-views.switchView command
2. Reads views from explorerViews.views workspace setting
3. Shows QuickPick UI with view names
4. Updates files.exclude setting with selected view's filters

Configuration Schema: package.json under contributes.configuration defines the explorerViews.views array schema.

Common Glob Patterns

• **/node_modules: Match node_modules at any depth
• **/dist: Match dist folder anywhere
• **/*.map: Match all .map files
• **/.git: Match .git directory
• Use **/ prefix to match at any directory level

Publishing

To package and publish:

# Install vsce globally
npm install -g @vscode/vsce

# Package as .vsix file
vsce package

# Publish to marketplace (requires publisher account)
vsce publish

Update version in package.json before publishing.

Enjoy!