Linters

Code quality tools

Since you are creating a library to share with the community, code quality matters a lot. The template provides eslint and stylelint configurations to improve and maintain your code. Code linting is performed inside IDE and when you commit your code.

Thus, every time you commit something, husky will run lint-staged with eslint --fix and stylelint --fix commands on staged files, preventing you from committing badly formatted code. You can change or disable this behavior inside .linstagedrc config file. Husky config is stored inside .husky directory.

Troubleshooting

If pre-commit hooks not work (e.g., your code is not linted after commit), run npm run prepare in your project folder.

Unit testing

Unit tests are done with jest and react-testing-library. Examples are included. Type check is integrated into pre-push hook and also available as package script.

Test files are matched by *.spec.* or *.test.* globs.

npm lint:types # runs jest tests

Type check

Type check is integrated into pre-commit hook and also available as package script.

npm lint:types # runs tsc in project

eslint

npm lint:code # runs eslint in src directory
npm fix:code # runs eslint in src directory with --fix parameter

Template extends @typescript-eslint/recommended, eslint-plugin-react-hooks/recommended, eslint-plugin-ssr-friendly/recommended, eslint-plugin-storybook/recommended rules. I added prettier to force consistent formatting. Config is available here: .eslintrc.cjs.

stylelint

npm lint:style # runs stylelint in src directory
npm fix:style # runs stylelint in src directory with --fix parameter

Template includes stylelint, to check CSS/SASS/LESS files with stylelint-config-standard set of rules. Config is available here: .stylelintrc.