Path Completion: Use File Icon for suggestions

[octref]

Whether it comes from internal or external icon theme.

For example, this isn't really nice

Would be great to show js/ts icons there.

For html path completion it would be much nicer too.

This would probably require changes in CompletionItemKind in LSP.

@mjbvz think you might be interested too.

[mjbvz]

Duplicate of #43204 which I closed as not worth the effort for js/ts. Html paths could be more interesting

[usernamehw]

With modern module bundlers (like webpack) it's possible to import other files (.css, .png,...) from js. Icons would be helpful in that case too.

[dbaeumer]

I am not sure what I should do with this. The CompletionItemKind has values for file and folder. There are no plans in the LSP to have CompletionItemKinds for different file types.

As @mjbvz pointed out he closed this request against TS.

@octref any objection to close this issue?

[octref]

@dbaeumer I do realize LSP isn't the right place to add support for this feature.
@jrieken I see #22206 and am wondering if you can provide any input. We have the dynamically generated icon for type color -- wondering if the same can be done for type file.

[jrieken]

The reason for keeping the number of completion item kinds is low is to lower the burden of implementing the LSP. It's not nice to require an implementor to bring along 50+ icons. Custom, extension defined, icons isn't the answer neither because then e.g. Eclipse-icons will be used inside VS Code leading to an alien-look.

It's a fine line of finding an expressive set of common icons and we will never meet all demands but that's also the idea of it.

[octref]

@jrieken Can we possibly make this a client-specific behavior. For example, when CompletionItemKind is file, read the filename in either label or textedit, match it against VS Code's matching rule for file icons, and use that icon for completion.

If other LSP clients don't have the file icon notion they can always provide one file icon.
It really helps to differentiate between the suggestion items. As @usernamehw said, Webpack allows you to import css/jpg/png/svg and whatever file Webpack's loader could resolve.

[jrieken]

For example, when CompletionItemKind is file, read the filename in either label or textedit, match it against VS Code's matching rule for file icons, and use that icon for completion.

Hm, interesting idea I like. Maybe a little harder to magic-match than colors but we should give it a try

[jrieken]

@mjbvz For this to work, we would need to get the full path (or at least the name with its extension), e.g. as documentation label...

[svipas]

I don't even know how to express myself, @jrieken created tabCompletion -> 'on' and localityBonus. @octref is working on path completion icons. Guys, it's not even Christmas and I'm getting all my gifts. I'm sooo happy 😄

Sorry for offtopic 😄

[jrieken]

The one challenge here is how file icons look together with symbols icon. The former can be themed the latter not so this has potential for ugliness...

[jrieken]

We have a first version for this

[svipas]

@jrieken Looks very nice, amazing work!!! 🔥

I have several questions:

1. It will adapt to the icon theme?
2. It will impact the performance of suggestions rendering? I'm asking cuz' sometimes I see Loading...in suggestion widget.
3. It will have a setting to enable/disable icons or it will be enabled by default to show icons?

My main concern is performance and the ability to use the same icons as selected in the icon theme.

[jrieken]

Yeah, it will take the icons from the icon theme. When no icon theme is in use you get what you have today. Performance impact shouldn't be noticeable, we only render different icons. The Loading... comes from the language brain, computing suggestions.

[svipas]

Thanks, @jrieken, I really appreciate your work and all the information. 👍

[yzhang-gh]

Looks great! One small problem, the folder icon feels not right 😅

[jrieken]

Yeah, it still needs some tweaks with alignment and it doesn't respect folder icons yet. The challenge is that some themes don't have an icon for folders...

[usernamehw]

It seems to be aligned to top...

And it's not working inside typescript import path completion... Is it intentional?

OS: Win10 x64 799bc78

[octref]

I think for TS, they return import path without suffix and there is no way to guess the file icon from it.

[jrieken]

And it's not working inside typescript import path completion

@usernamehw #44860 (comment)

It seems to be aligned to top...

Do you have a special config for the suggest font size?

[usernamehw]

"editor.suggestLineHeight": 40,
"editor.suggestFontSize": 20,

[Astrantia]

@jrieken Can we add a configuration for this to enable/disable? Personally, I like this, but if someone dislikes it they will always be able to disable it from settings.

[Astrantia]

@jrieken This is broken in the latest insiders. I only get icons for folders, but file icons don't work anymore.

[octref]

@jrieken I'm in a TS file and trying to do require, but TS LS returns all filenames without the suffix. Is there any way TS could update their CompletionItem so it displays the nice icons?

[jrieken]

@octref please read #44860 (comment)

[octref]

@jrieken I see, I'll try to send a PR for TypeScript, so the CompletionItems have label with suffixes like main.ts, router.js but the textedit doesn't contain the labels.

[usernamehw]

Icons are way too small now. Is it possible to have them the same size as before?:

Stable	Insiders