Recently, I noticed that there were repetitive tasks that I was doing for all the new projects. So, I decided to document them so as not to repeat the

Gear up your React codebase with Prettier and ESLint Automation

submited by

Style Pass

2021-09-06 10:00:09

Recently, I noticed that there were repetitive tasks that I was doing for all the new projects. So, I decided to document them so as not to repeat the mistakes. This article is about setting up Prettier, ESLint, Husky in your project.

Note: I prefer this config, you can use Playground and choose what works for you. You can check out the rationale and the options to understand the rules better.

Note: Again, these are rules that I prefer, you can add the ones that work for you. You can check ESLint configuration docs to create your rules.

Et voila, this is all you needed to do. You can test the hooks by simply committing. git commit -m "foo: this will fail" You should see this in the terminal.⧗ input: foo: this will fail ✖ type must be one of [ build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test ] [ type-enum ] ✖ found 1 problems, 0 warnings ⓘ Get help: https://github.com/conventional-changelog/commitlint/ #what-is-commitlint husky - commit-msg hook exited with code 1 ( error )

Note: If you want to skip these hooks, you can commit directly with -n/--no-verify option like git commit -m "yolo!" --no-verify