Visual Studio Code：如何为 TSX 组件启用 props 自动完成答案

【问题标题】：Visual Studio Code: how to enable props autocompletion for TSX componentsVisual Studio Code：如何为 TSX 组件启用 props 自动完成
【发布时间】：2020-04-09 07:44:59
【问题描述】：

假设我有一个组件 Lalo，它需要道具的高度和宽度。

interface I {
  width: string;
  height: string
}

const Lalo: React.FC<I> = (props) => {
   return <div>
            <div>props.height</div>
            <div>props.width</div>
          </div>
}

如何设置 Visual Studio Code，以便当它自动完成“Lalo”时，它还会为所需的道具添加占位符？今天，如果我输入<La，它会向我显示 Lalo 的建议，当我按 Enter 时，它会生成 <Lalo。我希望它生成<Lalo height="" width="" 并包含打字稿定义中指定的所有必需道具。

【问题讨论】：

标签： reactjs typescript visual-studio-code

【解决方案1】：

我正在使用React PropTypes Intellisense 扩展，虽然它提供了自动完成功能，但默认情况下它不会在您选择组件时添加必填字段。

在建议列表中显示组件道具的另一种方法是使用JSDoc。它基本上是您在定义参数及其类型的声明之上编写的 cmets。 Check this article 详细解释了如何使用。

【讨论】：