Prefix-Based Suggestion Grouping

[david-fong]

Motivation

When developing on certain platforms, there are type members on some common base types that all start with the same prefix. I'm specifically thinking of web-development's on___ and aria-___ attributes/properties. Others I can think of are C#'s As___, and SVG's fe___ filters. As of this writing, there are 48 aria attributes and 57 basic on handlers. It's a slight pain for the suggestions popup to be flooded with these; one of the ways that I internalize what the web platform (or any target environment) is capable of is by looking at what suggestions/autocompletions there are.

Proposal

Create a notion of a prefix-based suggestion grouping. Here's one possibility of how this can be configured:

{
  "editor.suggest.groupingPrefixes": [],
  "[html]":            { "editor.suggest.groupingPrefixes": [{"prefix": "aria"}, {"prefix": "on", "restMatches": "^[a-z]"}] },
  "[javascript]":      { "editor.suggest.groupingPrefixes": [{"prefix": "aria"}, {"prefix": "on", "restMatches": "^[a-z]"}] },
  "[typescript]":      { "editor.suggest.groupingPrefixes": [{"prefix": "aria"}, {"prefix": "on", "restMatches": "^[a-z]"}] },
  "[javascriptreact]": { "editor.suggest.groupingPrefixes": [{"prefix": "aria"}, {"prefix": "on", "restMatches": "^[a-z]"}] },
  "[typescriptreact]": { "editor.suggest.groupingPrefixes": [{"prefix": "aria"}, {"prefix": "on", "restMatches": "^[a-z]"}] },
  "[svg]":             { "editor.suggest.groupingPrefixes": [{"prefix": "fe"}] },
  "[csharp]":          { "editor.suggest.groupingPrefixes": [{"prefix": "As", "restMatches": "^[A-Z]"}] },
}

Here's an example of the behaviour I'm thinking of, given the above settings configuration:

<div "
<div "a
<div "ari
<div "aria

For each of the four above scenarios, the current behaviour upon triggering suggestions will include showing every aria- option that exists. The behaviour that I'm proposing would be that for the first three scenarios, triggering suggestions will include a single "group" instead of all aria- options. The group would have text along the lines of "aria ... (type "aria" to see more)", and then for the fourth scenario where the configured prefix has been fully typed out, the group will show all 48 of its contents.

Configuration

The restMatches optional parameter takes a regular expression string, and is used to filter options which should be part of the group.

It may also be useful to have a restNotMatches parameter.

It would also probably be useful to be able to configure which types of completion item kinds should or shouldn't be in the group (Ex. text suggestions probably shouldn't be included in groups).

Nesting Prefixes

I haven't thought of how nesting should be handled, but I think whatever's the least surprising is best (if there is one option that is the least surprising).

---

Please share your thoughts/feedback/other ideas.

[david-fong]

*Updated issue description to mention SVG filters as a use-case, and to include completion item kinds as a configurable filter parameter for what should be grouped.

[david-fong]

Here are some other use cases from TypeScript's lib.dom:

Audio___, CSS___, DOM___, HTML___, IDB___, MS___, Media___, Performance___, RTC___, SVG___, Speech___, Text___, VR___, WebGL___.

I just saw someone talking about react-icons and how it floods their suggestions for JSX.

JavaScript would benefit from this a lot 😅 there's so much in the global scope.

[david-fong]

@jrieken can you please elaborate on why this is out of scope? Is it due to implementation complexity? Is it just not deemed useful enough? Is it something that an extension would be able to solve? Is there a wiki page that explains why?