[Take Over mode][Suggestion] Add Setting to Force Suggestions Ordering

[zardoy]

Some Background

This is a continuation of #974 (comment) and comment below.

You just said

We need to be consistent with VSCode, because their designed behavior is verified by more users, and changing it in volar might be counterproductive.

However the behavior is already inconsistent, e.g. Volar is already much bettter comparing to what we have with builtin TS extension right now. I also noticed that Volar loads much faster and overall has better performance.

I have a repo, where builtin TS extension gives false errors (suppose just crashes) on pnpm start until I restart the server and this is not a case with your Volar.

So I always recommend to everyone to disable builtin TS extension globally in favor of takeover mode.

Feature Request

By default vscode agressively sorts everything by label, so initial order of suggestions is lost.

I'm just asking you to add a volar.extended.forceSortSuggestions setting. Here https://github.com/johnsoncodehk/volar/blob/master/packages/server/src/features/languageFeatures.ts#L45 add

if (list) list.items.forEach((item, i) => {
    item.sortText = `${item.sortText ?? ''}${i}`
})

Here is a code you can test with:

interface Foo {
	b: string,
}

interface Bar {
	c: boolean,
}

interface Test extends Foo, Bar {
	a: number
}

const d: Test = {
// trigger suggestions here
};

The setting will be disabled by default, so we don't break anything for existing users.

[johnsoncodehk]

So I always recommend to everyone to disable builtin TS extension globally in favor of takeover mode.

I don't really suggest that, at least that's not the purpose of volar. 😅
Maybe the vscode TS extension has some overhead performance issues, I suggest you keep to check if it resolve in new vscode version.

---

Do you expected b -> c -> a in this example? I checked TS original completion response at https://github.com/johnsoncodehk/volar/blob/01adff94b3851be652a4f463323a5c340e8a0596/packages/vscode-typescript-languageservice/src/services/completion.ts#L49-L51, it seems already sort by label. So it can't change in vscode and volar in this case.

Do you have other example or reference issue for the problem?

[
  {
    name: 'a',
    kind: 'property',
    kindModifiers: '',
    sortText: '11',
    source: undefined,
    hasAction: undefined,
    isRecommended: undefined,
    insertText: undefined,
    replacementSpan: undefined,
    sourceDisplay: undefined,
    isSnippet: undefined,
    isPackageJsonImport: undefined,
    isImportStatementCompletion: undefined,
    data: undefined
  },
  {
    name: 'b',
    kind: 'property',
    kindModifiers: '',
    sortText: '11',
    source: undefined,
    hasAction: undefined,
    isRecommended: undefined,
    insertText: undefined,
    replacementSpan: undefined,
    sourceDisplay: undefined,
    isSnippet: undefined,
    isPackageJsonImport: undefined,
    isImportStatementCompletion: undefined,
    data: undefined
  },
  {
    name: 'c',
    kind: 'property',
    kindModifiers: '',
    sortText: '11',
    source: undefined,
    hasAction: undefined,
    isRecommended: undefined,
    insertText: undefined,
    replacementSpan: undefined,
    sourceDisplay: undefined,
    isSnippet: undefined,
    isPackageJsonImport: undefined,
    isImportStatementCompletion: undefined,
    data: undefined
  }
]

[zardoy]

Do you expected b -> c -> a in this example? I checked TS original completion response at

Interesting...

But I definitely see the deffirence with pinia package:

Unmodified Volar:

With the change from first comment:

This is something that WebStorm does by default. However WebStorm shows correct order of suggestions only when some time passes after IDE load.

Another example would be createSlice from @reduxjs/toolkit (root export). First property that makes sense to define is a name of store slice. Both WebStorm and Volar with these changes show name as first suggestion.

I don't really know how to print the item list from https://github.com/johnsoncodehk/volar/blob/master/packages/server/src/features/languageFeatures.ts#L45. How did you check that? I tried placing breakpoint in several places, but they didn't work.

Anyway, can you install pinia and reproduce it from code above? Or I need to publish the full repository of repro?

[johnsoncodehk]

@zardoy since changed yarn to pnpm breakpoint just not no longer working, you could rollback to d222365 to debug, I will fix it later. I just log it by console.log(completionContext) for now.

I think it is enough to know pinia, I will check it.

[johnsoncodehk]

@zardoy seems the sorting is consistent to original response.

pinia:

@reduxjs/toolkit:

[zardoy]

Sorry for late reply. @johnsoncodehk, just if you're curious, I tried a simple TS plugin that solves the issue. It works well in all cases from above

import ts_module from 'typescript/lib/tsserverlibrary'

export = function ({ typescript }: { typescript: typeof ts_module }) {
    return {
        create(info: ts.server.PluginCreateInfo) {
            // Set up decorator object
            const proxy: ts.LanguageService = Object.create(null)

            for (const k of Object.keys(info.languageService)) {
                const x = info.languageService[k]!
                // @ts-expect-error - JS runtime trickery which is tricky to type tersely
                proxy[k] = (...args: Array<Record<string, unknown>>) => x.apply(info.languageService, args)
            }

            proxy.getCompletionsAtPosition = (fileName, position, options) => {
                const prior = info.languageService.getCompletionsAtPosition(fileName, position, options)
                if (!prior) return
                // Feature: Force Suggestion Sorting
                prior.entries = prior.entries.map((entry, index) => ({ ...entry, sortText: `${entry.sortText ?? ''}${index}` }))
                return prior
            }
            return proxy
        },
    }
}

Sorry I didn't really have time to figure out why it doesn't work with the latest versions of Volar. It does work with builtin TS support (4.6.3) and I hope there will be a way to use this simple plugin in Volar.

Again, I found it incredibly useful, so I think I will even publish this as extension. Will Volar read and use typescriptServerPlugins from ext?

[zardoy]

sorting is consistent to original response

I finally have had time to dig into it. If you're curious why you had it: microsoft/TypeScript#49012 (spoiler: we've had different versions of the TS Server somehow)