Attributes auto suggest, props inlay hints and better declare missing properties code action

[tjx666]

You can check the extension https://github.com/xicunyang/ts-space-prompt, the feature of that extension is awesome. But it conflict with this extension, and the implementation of that extension seems not very good, it copy whole official ts plugin code. I recommend to migrate the feature of that extension to this extension.

Another similar feature request is inspire from volarjs, show required props hint:

I think you're very impressive, big bro, and also very passionate about VSCode extension development. If you have the time, consider integrating these features into this plugin.

[tjx666]

@zardoy @Ilanaya update description

[Ilanaya]

Thanks! I'll be able to work on your requests tomorrow

[zardoy]

Hey, sorry for the delayed response.

You can check the extension xicunyang/ts-space-prompt, the feature of that extension is awesome

What features from this extension do you think are awesome? Please be specific and I'll migrate them for you without any problems.

• auto-trigger completions (trigger attribute completions on space, can also auto-trigger object suggestions on comma and so on)
• fill in missing attributes or properties. There is already builtin "declare missing properties" code fix, we can just improve it by adding tab stops. @Ilanaya we might also consider migrating insertCompletions feature from experiments extension which is more powerful and useful

@tjx666 please let us know if that's what you need

Also, I don't think it would make sense to fix compatibility with the aforementioned extension.

[tjx666]

Yes, you understand my need very clear. What's more is that mising props inlay hints

[zardoy]

Yes, you understand my need very clear. What's more is that mising props inlay hints

Okay, + inlay hints of missing props for react components. I'll implement these 3 features within 3 next days, would be awesome if you could tell us how we can better present these features for better discoverability!

[zardoy]

Adding declare missing codefix that adds

can hide the original with

"tsEssentialPlugins.removeCodeFixes.codefixes": [
        "fixMissingFunctionDeclaration",
        "fixMissingAttributes"
]

or maybe I should do it by default

---

added inlay hints (disabled by default):

---

Added auto completion trigger for attributes (enabled by default)

[tjx666]

@zardoy

we can just improve it by adding tab stops

seems doesn't work

[tjx666]

volar support double click the missing props to add it:

2024-05-25.21.01.53.mov

[tjx666]

@zardoy had you checked this?

@zardoy

we can just improve it by adding tab stops

seems doesn't work

[zardoy]

@zardoy had you checked this?

No, maybe @Ilanaya can

[thrivingproject]

Adding declare missing codefix that adds

can hide the original with

"tsEssentialPlugins.removeCodeFixes.codefixes": [
        "fixMissingFunctionDeclaration",
        "fixMissingAttributes"
]

or maybe I should do it by default

added inlay hints (disabled by default):

Added auto completion trigger for attributes (enabled by default)

What setting do I need to enable to be able to tab through props like in your second picture? When I click "Add missing attributes" in the QuickFix menu, the cursor moves the then end of the component tag and there is no placeholders to enter prop values.