How to make vs code autocomplete React component's prop types?

Question

How to make VS Code autocomplete React component's prop types while using the component in JSX markup?

P.S.: I'm using JS, not TS.

Varico

Possible duplicate of React intellisense in Visual Studio Code – Oshaughnessy

VS Code has still to update lot more, Webstorm provides this by default. – Jacintojack

this issue recommends a way to do that: github.com/Microsoft/vscode/issues/24926#issuecomment-294992766, I'll try to post this as an answer – Mangle

if your only purpose is to use React and JS I would advise you to use nuclide.io with ATOM. – Rancid

see also #49703515 – Systematics

convert everything to typescript! :D – Unprecedented

If JSDoc @param is provided you have full autocomplete. Otherwise TypeScript is the solution. – Paez

Answer 1

There is also option to use @params definition:

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

Glorianna

this does not seem to work with class components ? – Kiele

Answer 2

I noticed that if you have a stateless component and you get the props using ES6, when you use this component, you get the props with the autocomplete.

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

Dinadinah

Answer 3

You can also get intellisense support from PropTypes. You'll need to install 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

Lamrert

this only seems to work for function components – Kiele

I haven't checked but I am sure you can do this using class component by this way. static propTypes = { headerText: PropTypes.string.isRequired, // <-- how can I validate that this is a component class (or stateless functional component)? }; – Vasques

@Kiele no you can implement this on class component as well. check this comment https://mcmap.net/q/417358/-how-to-make-vs-code-autocomplete-react-component-39-s-prop-types – Quimby

Answer 4

for the class components you can use propTypes to do the job, you can follow this link for details -> Link

import PropTypes from 'prop-types';

class Greeting extends React.Component {
 render() {
  return (
  <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Quimby