reactjsvisual-studio-codematerial-uiintellisensereact-proptypes

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

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

Solution

  • 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.