DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React props auto-complete in VS Code
Maxime Bouveron
Maxime Bouveron

Posted on • Updated on

React props auto-complete in VS Code

React props auto-complete in VS Code

Strong autocomplete is one of the reasons why I love VS Code so much, it saves so much time. It is especially useful when using an external library, you don't need to read all the docs when writing function parameters for exemple.

Unfortunately, when it comes to React components, autocomplete doesn't work as well as vanilla JavaScript : By default when writing props for a non-typescript typed class component, you don't get any suggestions, even with defined PropTypes. It does provide suggestions for functional components though.

While searching for a solution to this problem, I found this extension. It does work, but it's not perfect. Suggestions aren't sorted, meaning you'll find them mixed with other suggestions (like the less usefull "word suggestions") and everyone in your team will have to download the extension, less than optimal.

By searching a little more however, I found a very cheap trick (yes, I think we can officially call this a trick) : a single specific JSDoc comment.

JSDoc is the key

For those who don't know, JSDoc is a special comment markup used in JS files to write documentation. You can use it to describe a function for example, including its purpose, its parameters or the returned value.

/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
}

Example from JSDoc's website

You probably see where I'm going, but there's a twist.

A React component is just a class or a function, meaning you can use JSDocs like any other class or function. It's great for explaining what your component does :

JSDoc comment explaining usage with a code snippet
Yeah sorry, that's an image but Markdown doesn't like code snippets in code snippets

VSCode showing JSDocs comment with code snipper

Problem is : what about props? For functional components, VS Code already shows you all of them in suggestions, but what about class components? You could define them as parameters in your JSDocs comment but that wouldn't be exactly true and you'll have to update it each time a PropType changes. That's where The Trickβ„’ comes in

The Trickβ„’

By adding @augments {Component<Props, State>} to your component's JSDoc, you'll add full PropTypes suggestions to your Class components :

/**
 * Random Component
 * @augments {Component<Props, State>}
 */
class RandomComp extends Component {
    static propTypes = {
        value: PropTypes.number,
        disabled: PropTypes.bool.isRequired,
    }

Which will result in this when using the component :

Autocomplete in VSCode showing the Prop Types

Yep, that easy. As you can see, even types are supported. (Required isn't though...)

It doesn't even stop here! You can add JSDoc comments to each PropType!

/**
 * Random Component
 * @augments {Component<Props, State>}
 */
class RandomComp extends Component {
    static propTypes = {
        /** The component's value*/
        value: PropTypes.number,
        /** Is the component disabled? */
        disabled: PropTypes.bool.isRequired,
    }

Autocomplete in VSCode showing the Prop Types JSDoc's comments

Please note that this also works with Function components

const SayHello = ({ name }) => <p>Hello {props.name}!</p>

SayHello.PropTypes = {
  /** Your name! */
  name: PropTypes.name,
}

Autocomplete in VSCode showing a functional component's prop types

This will considerably reduce complexity of using a component, you won't have to Ctrl+Tab back and forth between the component you're currently working on and the one you want to use.

Hope this small tutorial was useful, even though a lot of people know about JSDoc (thankfully!), not a lot of people know how to tell VSCode to actually read PropTypes.

Top comments (5)

Collapse
 
ctrleffive profile image
Chandu J S

awesome! what is the theme name you are using in the screenshot?

Collapse
 
maxbvrn profile image
Maxime Bouveron

That's Material Palenight! :)

Collapse
 
ctrleffive profile image
Chandu J S

thanks a lot!

Collapse
 
robertshaw1 profile image
Robert Shaw

Great write up! I'm not sold on it being a trick though. I think it's just how the utility works. Either way, thanks for sharing.

Collapse
 
sushmitg profile image
Sushmit Sagar Gaur

It doesn't even stop here! You can add JSDoc comments to each PropType!

This didn't work for me. With Component.propTypes the prop shows up in the suggestion but not it's description?

Create an Organization Does your company have something to share with DEV?

Create an Organization and start sharing content with the community on DEV.