microsoft / microsoft/TypeScript

React props in typescript are displayed in alphabetical order instead of showing component props at the top when running "trigger suggest"

Open
#52,080 9 comments 50 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Awaiting More Feedback Domain: LS: Completion Lists Suggestion
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:

  1. git clone reproduction repo at https://github.com/MichaelHindley/vscode-react-props-alphabetical
  2. start vscode with --disable-extensions flag
  3. run npm i to install dependencies
  4. go to Line 25 in App.tsx, place curser inside the Menu component opening tag
  5. run the "Trigger suggest" command
  6. Observe the props being sorted in alphabetical order instead of showing the components own props at the top
    image

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.

image

Notice the equivalent of "trigger suggest" in Intellij, showing the components props above all the default html props;
image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.