The application has been bootstrapped using Create React App for simplicity reasons. It allows us to create applications quickly without dealing with a complex tooling setup such as bundling, transpiling etc.
ESLint is a linting tool for JavaScript. By providing specific configuration defined in the.eslintrc file it prevents developers from making silly mistakes in their code and enforces consistency in the codebase.
ESLint Configuration Example Code
This is a great tool for formatting code. It enforces a consistent code style across your entire codebase. By utilizing the "format on save" feature in your IDE you can automatically format the code based on the configuration provided in the .prettierrc file. It will also give you good feedback when something is wrong with the code. If the auto-format doesn't work, something is wrong with the code.
Prettier Configuration Example Code
ESLint is great for catching some of the bugs related to the language, but since JavaScript is a dynamic language ESLint cannot check data that run through the applications, which can lead to bugs, especially on larger projects. That is why TypeScript should be used. It is very useful during large refactors because it reports any issues you might miss otherwise. When refactoring, change the type declaration first, then fix all the TypeScript errors throughout the project and you are done. One thing you should keep in mind is that TypeScript does not protect your application from failing during runtime, it only does type checking during build time, but it increases development confidence drastically anyways. Here is a great resource on using TypeScript with React.
Husky is a tool for executing git hooks. Use Husky to run your code validations before every commit, thus making sure the code is in the best shape possible at any point of time and no faulty commits get into the repo. It can run linting, code formatting and type checking, etc. before it allows pushing the code. You can check how to configure it here.
Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy import paths such as ../../../Component. Wherever you move the file, all the imports will remain intact. Here is how to configure it:
For TypeScript (tsconfig.json) projects:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}