如何使 vs code 自动完成 React 组件的道具类型？答案

【问题标题】：How to make vs code autocomplete React component's prop types?如何使 vs code 自动完成 React 组件的道具类型？
【发布时间】：2017-11-08 13:39:50
【问题描述】：

在 JSX 标记中使用组件时如何使 VS Code 自动完成 React 组件的 prop 类型？

P.S.：我用的是 JS，不是 TS。

【问题讨论】：

React intellisense in Visual Studio Code的可能重复
VS Code 还有很多更新，Webstorm 默认提供这个。
这个问题推荐了一种方法来做到这一点：github.com/Microsoft/vscode/issues/24926#issuecomment-294992766，我会尝试发布这个作为答案
如果你的唯一目的是使用 React 和 JS，我建议你使用 nuclide.io 和 ATOM。
另见stackoverflow.com/questions/49703015/…

标签： reactjs visual-studio-code intellisense jsx javascript-intellisense

【解决方案1】：

我注意到如果你有一个无状态组件并且你使用 ES6 获取道具，当你使用这个组件时，你会得到带有自动完成功能的道具。

const Stateless = ({ prop1, prop2 }) => {
  return (
    <div></div>
  )
}

【讨论】：

【解决方案2】：

还有使用@params 定义的选项：

/**
 * 
 * @param {{header: string, subheader: string, imageAlt: string, contentList: Array, orderLink: Object, contentLink: Object}} props 
 */
export default function JumbotronMain(props) {...}

【讨论】：

这似乎不适用于类组件？

【解决方案3】：

您还可以从PropTypes 获得智能感知支持。你需要安装prop-types

import React from "react"
import PropTypes from 'prop-types';

function Header(props) {
  return <h1>{props.headerText}</h1>
}

Header.propTypes = {
    headerText: PropTypes.string.isRequired
}

export default Header

【讨论】：

这似乎只适用于功能组件
我没有检查过，但我相信你可以通过这种方式使用类组件来做到这一点。 static propTypes = { headerText: PropTypes.string.isRequired, //