microsoft / microsoft/TypeScript
React props in typescript are displayed in alphabetical order instead of showing component props at the top when running "trigger suggest"
Nobody has claimed this yet.
- Dominant language
- Go
- Stars
- 111k
- Forks
- 14.3k
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 117
Description
Does this issue occur when all extensions are disabled?: Yes
- VS Code Version: 1.74.2
- OS Version: macOS 12.6
Steps to Reproduce:
- git clone reproduction repo at https://github.com/MichaelHindley/vscode-react-props-alphabetical
- start vscode with --disable-extensions flag
- run
npm ito install dependencies - go to Line 25 in App.tsx, place curser inside the Menu component opening tag
- run the "Trigger suggest" command
- Observe the props being sorted in alphabetical order instead of showing the components own props at the top

What should happen instead is that the component scoped variables from "MenuProps" should be at the top, rather than being alphabetically sorted. The alphabetical sorting is a very poor developer experience. When triggering suggestions in a react component, the most common scenario by far is to see which props the component type has, which vscode is aware of.
Notice the equivalent of "trigger suggest" in Intellij, showing the components props above all the default html props;

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by cloning the linked reproduction repository, installing its dependencies with npm i, and reproducing the issue at line 25 of App.tsx with extensions disabled. Use the Trigger suggest command on the Menu opening tag and verify that MenuProps entries appear before the default HTML props rather than in alphabetical order.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- developer-experience
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100