Inlay Hints: Improve hints for complex data types and arrays in particular

[FichteFoll]

Suggestion

🔍 Search Terms

• inlay hints
• inlay hints array

Related: #45295

✅ Viability Checklist

My suggestion meets these guidelines:

• not relevant, this is about tooling

⭐ Suggestion

I've been told that this repo is the correct place to suggest such a feature (via typescript-language-server/typescript-language-server#639).

Sometimes Inlay hints are too long and get cut off at some point (after 30 characters) and having the array braces at the end makes them very likely to be cut off despite it being the outer-most structure,
making it almost impossible to tell from the hint that this function returns an array (only from the leading (), whereas this would be easy if instead it showed : Array<{ key: string; tdC....

For reference, rust-analyzer does this more elegantly by leaving out details in the inner element if a configurable threshold of characters would otherwise be exceeded while still including all relevant punctuation for the outer types:

For this example, that would probably become : Array<{ key: string; … }> or : ({ key: string; … })[] (depending on a configurable threshold).

📃 Motivating Example

The following example illustrates the current problem with not being able to tell (quickly) that the return type is an array.

:: --> LSP-volar textDocument/inlayHint(657): {'textDocument': {'uri': 'file:///File.vue'}, 'range': {'end': {'line': 129, 'character': 0}, 'start': {'line': 0, 'character': 0}}}
:: <<< LSP-volar 657: [{'kind': 1, 'position': {'line': 71, 'character': 23}, 'paddingLeft': True, 'label': ': ProductionSpecification[]'}, {'kind': 1, 'position': {'line': 79, 'character': 28}, 'paddingLeft': True, 'label': ': boolean'}, {'kind': 1, 'position': {'line': 82, 'character': 21}, 'paddingLeft': True, 'label': ': ({ key: string; tdClass: st...'}, {'kind': 1, 'position': {'line': 90, 'character': 63}, 'paddingLeft': True, 'label': ': Promise<void>'}, {'kind': 1, 'position': {'line': 91, 'character': 24}, 'paddingLeft': True, 'label': ': any'}]

💻 Use Cases

See above.

[FichteFoll]

Rereading this, I missed to stress the point that I generally prefer the generic syntax for arrays, so making that configurable (like you can for eslint, for example) would be appreciated because I'm sure some people will think otherwise.