How do you show expected values of react component props in vscode?

Viewed 3119

I am trying to create my own private component library. I manage to show the description of the prop using prop-types but the expected values are not shown. I haven't seen any documentation regarding this one or I'm just blind.

This is what I'm trying to achieve just like in material-UI.

enter image description here

2 Answers

PropTypes is for runtime checks it has nothing to do with VSCode auto-complete/auto-suggestions.

Getting a description of the property is a part of VSCode, it gets it from function parameters:

// Will get those props autocomplete
const Component = ({ prop1, prop2, prop3 }) => {}

// Won't get autocomplete
const Component = (props) => {}

For getting auto-suggestion you need to add types for the component or using types system like Typescript and Flow.

See types example in Material UI repo.

See related question of how it's done.

I really appreciate what @dennis-vesh said. However this method will give you ability to suggest options like MaterialUI does. Suppose you have a prop named as type. The types are facebook, youtube and twitter. Now you want your component should suggest it to the developer when they use your component. The method helps me most is JSDOC method.

/**
 * 
 * @param {{ 
 * type: "facebook" | "youtube" | "twitter";
 * }} props Props for the component
 * 
 */
const Component({ type }) => {....}

VS code suggestion screenshot

Related