Automate Adding PropTypes to Components with VS Code's React PropTypes Generator Extension

Thomas Greco
InstructorThomas Greco
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

Two things that all React developers will agree on are:

  1. It's imperative that you define all prop types for a given component when writing production-grade code.
  2. 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

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.

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today