在 VS Code 中使用 IntelliSense 时，TypeScript React props 优先级

Question

假设我有这个简单的组件，它运行良好：

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;

当我想使用 IntelliSense 时，如何告诉 TS 或 VSCode props 的优先级？
目前它按此顺序向我显示所有道具（按字母顺序排列）：

在这种情况下，我希望我的自定义道具（即 ）tag在我按下 时位于其他道具之上ctrl + enter。有什么办法可以做到吗？我的问题可能与 TypeScript 无关，而是 VSCode 编辑器本身。

Answer 1

正如问题评论中所述，有一个开放问题票证要求改进此行为：打字稿中的 React props 按字母顺序显示，而不是在运行“trigger suggest”#52080 时在顶部显示组件 props。我建议您对该问题单点赞以表示支持，并订阅它以获取有关讨论和进展的通知。请避免在那里发表嘈杂的评论，例如“+1”/“bump”。

因此，据我所知，在撰写本文时，还没有任何机制可以让用户将某些建议配置为具有更高的优先级。不过，一些现有的机制可能对您有一些小小的帮助：

• 那个editor.suggest.localityBonus设定。

  控制排序是否优先显示靠近光标的单词。

• VS Code 添加了记住建议选择的功能（请参阅记住建议选择 #22839）。您可以看到完成该问题的相关提交以及此相关文件。也就是说，如果您将 VS Code 设置命名editor.suggestSelection为"recentlyUsed"或"recentlyUsedByPrefix"，我认为您只需选择几次您想要的建议就可以得到一个很好的解决方法。

显然，这些都是非常不理想的解决方法，第一个甚至可能不适用于您的场景（毕竟这取决于代码定位）。我不会假装他们比那更好。

扩展的作者建议zardoy.ts-essential-plugins尝试使用该扩展及其"tsEssentialPlugins.fixSuggestionsSorting": true,设置。我与该作者没有任何关系，也没有自己尝试过，但我只是提及它以防有帮助。

如果您想要一些有趣的额外读物，请参阅以下内容：

• https://github.com/microsoft/vscode/issues/45385
• https://github.com/microsoft/vscode/issues/33219
• https://github.com/microsoft/vscode/issues/80444
• https://github.com/microsoft/TypeScript/issues/15024