ESLint, Husky & PropTypes - eyecuelab/walkertreker GitHub Wiki

Tips on Working with These Awesome Tools

1. ESLint & Husky

Aaron set up ESLint and Husky on the 3rd internship that worked on walkertreker (same internship that created this wiki). His implementation made it so ESLint would only lint files that were worked on. SO, most of the files that we worked on are up-to-standards, but many untouched files still need updates.

ESlint is awesome and it has excellent documentation. The point of having a linter is to update your code to meet its standards, but in the case you need to work around its rules, you have options:

  • Add an inline eslint disable, e.g.: // eslint-disable-line no-use-before-define
  • Add an eslint disable for a block of code: /* eslint-disable */ ...code... /* eslint-enable */

Husky is an awesome pre-commit tool that checks if you've fixed the errors that the linter has caught. When you make a commit message, husky is automatically run and if there are linter errors, husky will take you to the terminal output that lists the errors. This is useful, but also can thwart your development process by shifting your focus from what you're working on to handling eslint errors. The way around Husky is to:

  • Make a commit with the flag --no-verify, e.g.: git commit -m"super good work right here" --no-verify

2. PropTypes

There are missing PropTypes everywhere in this project. Sometimes it can be challenging to figure out the data type of a prop. Using a debugger can be very helpful. Some tips:

  • In the project search for propTypes or defaultProps for examples on what PropTypes should look like.
  • Also check out the React docs
  • Having the isRequired ending on a PropType declaration (e.g.: someProp: PropTypes.func.isRequired) makes it so that you do not have to declare a defaultProp, but if the prop isn't always passed through to a component (which happens often, especially in UI components that are reused in many situations), your code will break.

Have fun!