prettier-and-eslint.md

Prettier and Eslint for code quality

Heavily inspired by Dan Abramov.

Problem

How to write less error-prone code in a way that supports collaboration with a large team.

Proposal

Following these steps won't catch everything but it will catch a lot of things and before they're even committed to VC.

• Use Prettier to enforce code style. Prettier will fix issues automatically and silently.
• Use ESlint to catch possible mistakes in the code before they get commited.
  • Configure some rules to autofix and others to require dev intervention
• Apply these rules on a precommit hook.

Use Prettier to fix things related to code style

• whitespace
• semicolons
• line length

Use ESlint to catch things that might be mistakes

Here are some example rules that I've found to be helpful on previous collaborations.

Critical rules

• no-unused-vars
• no-shadow
• no-debugger
• default-case
• no-undefined
• no-use-before-define
• no-var
• prefer-const
• eqeqeq
• guard-for-in
• no-caller
• max-depth
• prefer-promise-reject-errors
• require-atomic-updates
• import/no-duplicates
• import/no-named-as-default
• import/named
• import/no-useless-path-segments
• import/no-self-import
• import/export
• import/no-extraneous-dependencies
• react/prop-types
• react-hooks/rules-of-hooks

Non-critical rules

• block-scoped-var
• no-alert
• no-console
• no-bitwise
• curly
• max-params
• complexity
• import/first
• import/extensions
• import/no-named-as-default-member
• import/no-commonjs
• react/no-deprecated