My react application is bootstrapped using CRA(react-scripts v4.0.0) and I want to add a code formatter (prettier to be specific) that must format the code before committing the changes to my git repo.
I know that eslint is a dependency of react-scripts and linting is done using 'eslint-webpack-plugin'(default enabled) inside the webpack configuration. Snippet from CRA github | React Scripts webpack config
Now, if I want to extend my original eslint-config I can install/write a new eslint-config like 'eslint-config-prettier' and add it to my extends key inside eslint-config. And this would do the job.
Assuming, this updates the current eslint-config without installing any extra dependencies and as normal, would lint the application code every time (with updated config) when the code is changed. And would throw compilation errors as it should.
I have seen multiple tutorials over web installing eslint again as a dev dependency and then using it inside pre-commit hooks for fixing linting issues and then running the code formatters like prettier sequentially after that. Is installing and running eslint --fix in a pre-commit hook necessary at all? or is it redundant?
Advertisement
Answer
Even if CRA based react application halts the compilation on lint error, it does not strictly prevent the user from committing the bad code.
Adding the eslint --fix pre-commit hook halts the user’s commit if there is an unfixable lint error present in staged files or the whole project (depending on the command, file glob pattern provided) thus prevents accidental push of bad code.
Although, installing eslint again in case of CRA is redundant as it is already present as a dependency for react-scripts.