FileFilter
A Visual Studio Code extension that provides persistent file filtering functionality directly in the Explorer sidebar. Filter files in real-time as you type, with support for file extensions, filenames, and directory names. Compatible with VS Code and its forks like Cursor and Windsurf.
Features
- Persistent Filter Input: Always-visible filter input at the bottom of the Explorer sidebar
- Real-time Filtering: Filter files as you type with 300ms debounce
- Multiple Filter Types: Support for glob patterns, filename matching, and directory filtering
- Auto-expand Directories: Automatically expands folders when filtering by directory name
- iOS-style Clear Button: Round X button that appears when typing, like iOS search fields
- Smart Filtering: Hides non-matching files and empty directories from the Explorer
Usage
Filtering Files
The filter input is always visible at the bottom of the Explorer sidebar. Simply start typing to filter files:
File Extensions:
*.ts - Show only TypeScript files*.json - Show only JSON files*.{js,ts} - Show JavaScript and TypeScript files
Filename Matching:
README - Show files containing "README" (like README.md)package - Show files containing "package" (like package.json, package-lock.json)config - Show files containing "config"
Directory Filtering:
src - Show all files in the src directory (auto-expands the folder)test - Show all files in directories containing "test"
Clearing Filters
- Click the X button in the filter input (appears when typing)
- Clear the text input manually
- Use the "File Filter: Clear" command from Command Palette
Commands
| Command |
Description |
filefilter.setFilter |
File Filter: Set Pattern |
filefilter.clearFilter |
File Filter: Clear |
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X)
- Search for "FileFilter"
- Click Install
Manual Installation
- Download the
.vsix file from the releases page
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X)
- Click the "..." menu and select "Install from VSIX..."
- Select the downloaded
.vsix file
Development Installation
# Clone the repository
git clone https://github.com/ohwhen/code-plugin-file-filter.git
cd code-plugin-file-filter
# Install dependencies
npm install
# Compile the extension
npm run compile
# Open in VS Code for development
code .
Press F5 to run the extension in a new VS Code window for testing.
Building and Publishing
Build the Extension
npm install
npm run compile
Package for Distribution
# Install vsce globally
npm install -g vsce
# Package the extension
vsce package
This creates a .vsix file that can be installed manually or published to the marketplace.
Publish to Marketplace
# Login to Visual Studio Marketplace
vsce login your-publisher-name
# Publish the extension
vsce publish
Requirements
- VS Code version 1.74.0 or higher
- Node.js 16.x or higher (for development)
Compatibility
This extension is compatible with:
- Visual Studio Code
- Cursor
- Windsurf
- Other VS Code-based editors
Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
License
MIT License - see LICENSE file for details.
Changelog
0.1.0
- Initial release
- Persistent filter input in Explorer sidebar
- Real-time filtering with 300ms debounce
- Support for file extensions (*.ts, *.json)
- Support for filename matching (README, package)
- Support for directory filtering with auto-expand
- iOS-style clear button
- Smart filtering that hides empty directories
