[icon-themes] Support for globs in file associations (Icon themes)

[robertohuertasm]

• VSCode Version: Stable 1.5.2
• OS Version: Windows 10

See vscode-icons #328

This will allow to support a very common scenario which is a filename with small variations depending on environments:

• web.config, web.prod.config, web.dev.config
• webpack.config.json, webpack.dev.config.json
• ...

[bpasero]

@robertohuertasm works for me:

"files.associations": {
    "*{.prod.,.dev.,.}config": "xml"
}

[robertohuertasm]

@bpasero I think I didn't explain myself clearly so I've slightly changed the issue's title. I wasn't referring to that kind of file association but the one we discussed in vscode-icons #328.

[bpasero]

@robertohuertasm got it, reopening.

[jing2si]

+1

[alyyasser]

+1

[AndrewKiri]

+1

[amamut]

+1

[yaSebastian]

+1

[echizenryoma]

+1

[xanathar]

+1
Just to add a further scenario.. Unity supports only a limited number of assets; text files must be *.txt for example. So, again, if you have let's say Lua scripts inside, the easiest option to have Unity embedding them is to rename them *.lua.txt - it would be great if icons were aligned to them being lua scripts in disguise and not text files.

[dreki]

+1

[smukkekim]

+1

[kristianmandrup]

The latest fashion is to have tests co-located with the src, using a convention such as .test.js.
Would be super helpful to be able to distinguish between regular application files and test files using custom icons!!

+1

[aeschli]

For '.test.js': That already should work, just add that to the extensions table. You can have both js, and test.js in there and we will take the icon of whatever extension whatever matches most.

[aeschli]

For the lua example, why not associate extension lua.txt with lua?

[kristianmandrup]

But the whole point is to have a specific test icon, to make it clear it is not a regular .js file.
It is a special variant of js, but could be configured to be special variant for any language with test files...

I have tests and regular app files together, but want to be able to visually distinguish the files beyond having to mentally parse the file extension in the tree view. This is a common pattern now, since our tests tool can pick up test files in the src, so we don't need to have a separate /test or /spec folder with long require chains into the root /src folder which becomes a nightmare to maintain as you scale :o

My current vsicons config:

    { icon: 'spec', extensions: ['spec.js'], special: 'js' },
    { icon: 'test', extensions: ['test.js'], special: 'js' },

[kristianmandrup]

I added a PR, but just discovered new icons are not in zip.

vscode-icons/vscode-icons#409

[amit-srivastava-007]

+1

[kristianmandrup]

@amit-srivastava-007 You are welcome to help out with my PR. I'm not a graphic designer and I don't know how to position the icons correctly (ie. centered, then lowered by one pixel).

[GBora]

+1

[ghost]

Could the directory also be exposed in the File Icon API? (Moved to new issue)

[danielflippance]

+1 Want to have different icons for python files *.py and python tests test_*.py

[metuuu]

+1

[ghost]

Because this should be a new issue..
I opened #136656 for anyone interested in support of folder/directory name in file association.

[pgbradbury]

@aeschli is this still open in the backlog? Is there anything that can be done to help it along? It's been five and a half years. Is it likely to be done?

[aeschli]

We have no plans for implementing this future. It doesn't go well with the current implementation of file icons based on matching CSS rules and would require a rewrite.

[MisterLight]

We have no plans for implementing this future. It doesn't go well with the current implementation of file icons based on matching CSS rules and would require a rewrite.

@aeschli Could be a way to specify the extension separator? For example see: material-extensions/vscode-material-icon-theme#1598

A posible solution for that could be change the default separator '.' to another special character like '_' or '-'

[zm-cttae]

It doesn't go well with the current implementation of file icons based on matching CSS rules and would require a rewrite.

Correct that file icon theme consumption and icon CSS class logic is separate:

• https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/services/getIconClasses.ts
• https://github.com/microsoft/vscode/blob/main/src/vs/workbench/services/themes/browser/fileIconThemeData.ts

File icons would probably suffer an FOUC if the two interacted, because the entire vscode-icons file icon theme would be recomputed again for a simple action like a folder open.

(Take $n$ as the number of dot segments in a filename.)

There are two possible approaches and both need new data (1. is super ugly IMHO and should be avoided):

1. Add a basename class, then a positional anchor class before and after the extension list, then figure out a combination of .ext, [class*=] and :not([class*=]) that can match that glob. That can be formalised as some kind of algorithm, but the testing and maintainability cost would be high. Also *= attribute selectors are brittle.
2. Explode a filename into all possible matching globs and just match that glob.
   • The use cases described here would be quick to run - $2n-2$ still $O(N)$ - and easier to maintain.
   • If we want a comprehensive set of useful globs, that would lead to a $2^n$ now $O(c^N)$ exponential combination (e.g. for webpack.dev.config.json you'd have 16 relevant results..)
   • Perhaps we can invest in the comprehensive set when $n < 5$ .

We also would want ** to match $n>=1$-segment matching instead of $n>=0$
(So ** = *, *.*, *.*.*)
Because otherwise we'd be increasing our big-O $N$ by $0.5$.

Proof of concept, $O(N)$ linear solution for getIconClasses.ts:

// Prefix-matching coalescing globs and non-coalescing wildcard globs
function getIconClassesForSomeGlobs(name) {
    // remove ellipsis + chars >=255 to defend against explosive combination
    // https://github.com/microsoft/vscode/issues/116199
    const dotSegments = name.slice(-255).replace(/\.\.+/g, '').split('.');
    const lastDotIndex = dotSegments.length - 1;
    const globs = [];
    for (let i = 0; i < lastDotIndex; i++) {
        const suffix = dotSegments.slice(0, i + 1);
        suffix.push(i < lastDotIndex - 1 ? '**' : '*');
        globs.push(suffix.join('.'));
        const base = dotSegments.slice();
        base.splice(i, 1, '*');
        globs.push(base.join('.'));
    }
    return globs;
}

This is the $O(c^N), c = 2$ solution:

// All globs matching a file name, excluding globs with chained `*` segments
function getIconClassesForAllGlobs(name) {
    // remove ellipsis + chars >=255 to defend against explosive combination
    // https://github.com/microsoft/vscode/issues/116199
    const dotSegments = name.slice(-255).replace(/\.\.+/g, '').split('.'); 
    const globs = []
    const bitmask = Math.pow(2, dotSegments.length) - 1;
    for (let i = 0; i < bitmask; i++) {
        let buffer = [];
        for (let j = 0; j < dotSegments.length; j++) {
            buffer.push(i & Math.pow(2, j) ? dotSegments[j] : '*');
        }
        globs[i] = buffer.join('.').replace(/(?<=\*)(?:\.\*)+/, '*'); // coalesce chained * filename segments into **
    }
    return globs;
}

[zm-cttae]

@aeschli now that this is feasible - run this replit to see - there are two questions here:

1. Should iconLabel.ts be able to generate data attributes? Then fileIconThemeData.ts could do [data-glob~=glob]. getIconClasses function sending out 50+ selectors suffixed with -glob-file-icon is not sane to me.
2. Thoughts on when the linear solution (getIconClassesForSomeGlobs) is ideal and getIconClassesForAllGlobs isn't? The replit shows how the first function outputs a limited subset of the original.

Noting here - filenames with 5 or more dot segments are consistently considered "weird" and we're not losing much with the $n < 5$ limit explained in #12493 (comment).

[9ssi7]

You must allow patterns on the icon issue.

I guess you think this can be achieved with extensions but there are exceptions. In Golang, test files must end with _test. Click for detailed information.

Golang related test documentation:

I want to add a corresponding icon to my go files ending with_test pattern. But vscode api doesn't accept a fileNames value like *_test. We cannot achieve this with fileExtensions. Goland, an alternative to vscode, provides this. I think vscode should provide it too.

I'm open to feedback.

[zm-cttae]

It is possible to do name._test.go for now it seems, so fileExtensions works for Go. Doesn't work for test_*.py in Python.
vscode-icons/vscode-icons#2754 explains that this use case has significant A11Y benefit for dyslexia.

---

As I understand it, we have (maybe past tense now) a significant blocker:

File icons would probably suffer an FOUC if the two interacted, because the entire vscode-icons file icon theme would be recomputed again for a simple action like a folder open.

My suggestion was to generate globs on the CSS service side, and those get targeted in file icon theme.. but this needs the assignee's input (plus core team has other work to do).

I threw together code for your use case still - see maybePushBasenameDashGlobs function in the replit.

[zm-cttae]

I've implemented the feature at #174286.
Please take a look at new spec - #174286 (comment) - and see if you have suggestions
The PR will probably be tested during the March or April 2023 iteration - when the assignee gets time.
Huge thanks to them for their early reviews also 👍