React props auto-complete in VS Code

#react #javascript #vscode #tutorial

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 :

Yeah sorry, that's an image but Markdown doesn't like code snippets in code snippets

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 :

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,
    }

Please note that this also works with Function components



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

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

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.