Adding ESLint and Prettier

[NaithanB]

Heya, I’ve added ESLint and Prettier to the project on the ESLint_Setup branch. Try checking it out and making sure that it runs on your machine. I’m not sure, but I think you may need to do cd vanhouse and then npm install. We should now be able lint our code by running npx eslint src/components/<your-component-here>. We can also check formatting using npx prettier --check src/components/<your-component-here> and auto-format using npx prettier --write src/components/<your-component-here>. I was thinking that we could all update our components to fit the linting rules on this branch and then merge to project_2 once everything works.

Adding the linter causes the project to fail to compile now. There are some changes that we need to make. You can see the problems either by running npm start or running ESLint. I've already made a few of the easy changes that needed to be done in every file. So, you may notice a few small changes to a couple of your components (e.g. import React from ‘react’).

To run the app without using the linter use npm run start-no-lint

Two issues that came up for me when running the linter are…

“Must use destructuring of props assignment”

• This can be fixed by changing, for example,

  function NewPost(props) {
  …
  props.handleClose();
  props.show
  props.handleClose();

  to this

  function NewPost({ show, submit, handleClose }) {
  …
  handleClose();

See this link: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md

The second issue was... “ is missing in props validation”

• See what I added to the end of NewPost.js and Post.js to fix that issue if you run into it (also see the import statement for PropTypes)
• These links explain the fix in more detail.
  • https://stackoverflow.com/a/64012328
  • https://stackoverflow.com/a/38685016
  • https://reactjs.org/docs/typechecking-with-proptypes.html
  • https://stackoverflow.com/a/45288589

Let me know if this works for you.

[BarneyShi]

Thanks, Naithan 👍 I think what we can do next is to fix our own component in this branch, so we can create an eslint-ready base branch project_3.