javascript reactjs typescript visual-studio-code

TypeScript React props priority when using IntelliSense in VS Code

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.

Solution

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".

VS Code extensions can (with some exceptions) control the sort order of their suggestions by using the sortText property, and if they don't provide it, the label is used instead.

But as far as I know, at the time of this writing, there is no mechanism for a user of an extension to override that and 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: