How to Customize File Filtering in Theia IDE: Hide .txt Files Globally Except in a Specific Folder setting.json

[sumit140792]

Theia IDE is a popular extensible cloud & desktop IDE framework. By default, it supports filtering files in the Explorer using files.exclude patterns, similar to VS Code. However, Theia’s filtering system does not support negated patterns or exception rules like “exclude all .txt files except those inside a specific folder.”

In this post, we will explore how to achieve this behavior by writing a simple Theia frontend extension that customizes the file filtering logic.

Why files.exclude is Not Enough
Consider this example in settings.json:
"files.exclude": {
"/*.txt": true,
"/Xfolder": false
}

VS Code supports this to exclude all .txt files globally but keep files inside Xfolder. Unfortunately, Theia currently does not support the false override or negated globs, so .txt files inside Xfolder are also hidden.

The Solution: A Custom Theia File Filter Extension
To work around this limitation, we can write a small Theia frontend extension to implement custom filtering logic:

Hide all .txt files globally.

Show .txt files inside the folder named Xfolder.

[msujew]

Hey @sumit140792,

this sounds like a bug report/feature request to me. Do you mind creating an issue for this?

If you want to fix this yourself (and maybe contribute a PR), I believe this code here in particular is responsible for the filtering logic:

theia/packages/navigator/src/browser/navigator-filter.ts

Lines 144 to 164 in cbceb25

	export class FileNavigatorFilterPredicate implements FileNavigatorFilter.Predicate {
	private readonly delegate: FileNavigatorFilter.Predicate;
	constructor(exclusions: FileNavigatorFilter.Exclusions) {
	const patterns = Object.keys(exclusions).map(pattern => ({ pattern, enabled: exclusions[pattern] })).filter(object => object.enabled).map(object => object.pattern);
	this.delegate = FileNavigatorFilter.Predicate.and(...patterns.map(pattern => this.createDelegate(pattern)));
	}
	filter(item: { id: string }): boolean {
	return this.delegate.filter(item);
	}
	protected createDelegate(pattern: string): FileNavigatorFilter.Predicate {
	const delegate = new Minimatch(pattern, { matchBase: true });
	return {
	filter: item => !delegate.match(item.id)
	};
	}
	}