Automate Adding PropTypes to Components with VS Code's React PropTypes Generator Extension
Two things that all React developers will agree on are:
- It's imperative that you define all prop types for a given component when writing production-grade code.
- Although the process only takes a minute, it can be a pain point of React development, especially when a component takes a large number of props..
In this lesson, we learn how to use the React PropTypes Generate extension to automatically define our prop-types for us without having to write a single line of code!.
Resources
- VS Code Marketplace - React PropTypes Extension
- [NPM Registry - PropTypes](https://www.npmjs.com/package/prop-types(
Instructor: [0:01] The first thing we need to do is get the react-proptypes-generate extension from VS Code. You do this by searching the Marketplace, and you grab it. As you could see, I already have it installed.
[0:21] Here, we can take a look at our page. You'll see I have this index React component. I've created it for the sake of this video, it's not doing much. You'll see that we have this string here, and we have this array of numbers. All these are coming in as props. You'll see that ESLint is complaining about all of these missing in our props validation.
[0:51] Now, instead of having to hand write this out, we can now pull up this, and...oh! You'll see that we must select the text of the component's name. Now if we do this, now I have it highlighted, and we do that again, and boom! You'll see that all of these prop types have been created for us, without us actually having to do anything.
[1:23] If we save, these ESLint errors go away, as we're now abiding by our rules.