TypeScript React props priority when using IntelliSense in VS Code

Question

Say I have this simple component, which is working fine:

import clsx from "clsx";
import React from "react";

interface HeadingProps
    extends React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    > {
    tag?: string;
}

const Heading: React.FC<HeadingProps> = ({
    tag = "h2",
    className,
    children,
    ...props
}) => {
    const CustomTag = tag as keyof JSX.IntrinsicElements;
    return (
        <div className={clsx("heading-wrapper", className)} {...props}>
            <CustomTag className="heading">{children}</CustomTag>
        </div>
    );
};

export default Heading;

How can I tell TS or VSCode about the priority of props when I want to use IntelliSense?
Currently it showing me all of the props in this order (alphabetically):

In this scenario I want my custom prop, which is tag, to be on top of other props when I press ctrl + enter. Is there any way to do so? My question might not be even related to TypeScript, but VSCode editor itself.

Does [this answer](https://stackoverflow.com/questions/43857693/visual-studio-code-order-in-autocompletion) answer your question> — 5px, Aug 18 '23 at 09:14
What you linked is not bad, but it's not a complete solution to the question. Identifying with the question, I do see that it would indeed be great if VSCode could display attributes in the TypeScript type declaration order in the tooltip. — rozsazoltan, Aug 18 '23 at 09:48
@Chix unfortunately, no. please check out this issue for more details https://github.com/microsoft/TypeScript/issues/52080#issue-1517685893 — Adnan, Aug 18 '23 at 10:29
As a minor improvement, you could define `tag` like so: `tag?: keyof JSX.IntrinsicElements`, that would remove the need for the type assertion (you could also reassign that toe `CustomTag` when destructuring). I'd like to offer an answer but I haven't found one better that the above discussion/comments — Harrison, Aug 18 '23 at 12:11
This is a VSCode issue not a react or typescript or javascript issue. I'd open an issue on their GIT — Dimitar, Aug 18 '23 at 14:09

starball · Accepted Answer · 2023-08-20T21:37:16.677

As stated in the question comments, there is an open issue ticket requesting improvements on this behaviour: React props in typescript are displayed in alphabetical order instead of showing component props at the top when running "trigger suggest" #52080. I suggest you give that issue ticket a thumbs up to show support for it and subscribe to it to get notified about discussion and progress. Please avoid making noisy comments there like "+1" / "bump".

So, as far as I know, at the time of this writing, there is no mechanism for a user to configure certain suggestions to have a higher priority. There are some existing mechanisms that may be of some minor help to you though:

The editor.suggest.localityBonus setting.

Controls whether sorting favors words that appear close to the cursor.
VS Code added a feature to remember suggestion selections (see Remember suggestion selections #22839). You can see the related commit that completed the issue, and this related file. This is to say- if you set the VS Code setting named editor.suggestSelection to either "recentlyUsed" or "recentlyUsedByPrefix", I think you could get a nice workaround for what you want by just selecting the suggestion you want a couple times.

Obviously those are very non-ideal workarounds, and the first one may not even work for your scenario (it depends on code positioning after all). I won't pretend they're anything better than that.

It was suggested by the author of the zardoy.ts-essential-plugins extension to try using that extension with its "tsEssentialPlugins.fixSuggestionsSorting": true, setting. I have no affiliation with that author, and have not tried this myself, but am just mentioning it in case it helps.

If you want some fun extra readings, see the following:

thanks for the detailed answer. using the [`zardoy.ts-essential-plugins`](https://marketplace.visualstudio.com/items?itemName=zardoy.ts-essential-plugins) plugin did it for me. — Adnan, Aug 22 '23 at 09:50

TypeScript React props priority when using IntelliSense in VS Code

1 Answers1

Linked