featuring:
- eslint
- prettier
- husky
- jest
- git init
- npm init
yarn add typescript -D
If bootstrapped with eslint, react app comes with eslint installed by default. else, need to install eslint package(^8.56.0).
If typescript is installed, need to use ts specific parser and plugins
- @typescript-eslint/parser
- @typescript-eslint/eslint-plugin
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-jsx-a11y
- eslint-plugin-import
create .eslintrc/.eslintrc.js/.eslintrc.json
(export eslint config object if it's a js file)
Install following packages to integrate prettier to be used a code formatter and plugins to work along with eslint
- prettier
- eslint-config-prettier
- eslint-plugin-prettier
create .prettierrc/.prettierrc.json
- We can use readily available configurations which can be declared in
extends
array. - If we want to use only specific rules from the config, we can install the plugins and add to
plugins
array and enable/disable only that specific rule
{
"parser": "@typescript-eslint/parser",
"plugins": [
"react",
"react-hooks",
"@typescript-eslint",
"jsx-a11y",
"prettier"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"prettier",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended"
],
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"quotes": ["error", "single"],
"no-magic-numbers": "off",
"@typescript-eslint/no-magic-numbers": [
"error",
{
"ignore": [0, 1, -1, 100],
"enforceConst": true,
"ignoreNumericLiteralTypes": true,
"ignoreEnums": true,
"ignoreDefaultValues": true,
"ignoreArrayIndexes": true
}
],
"@typescript-eslint/no-explicit-any": ["off"],
"@typescript-eslint/no-non-null-assertion": ["off"],
"react-hooks/exhaustive-deps": ["off"]
}
}
npx husky-init && yarn
This will install husky as dev dependency and setup .husky directory with husky script file and pre-commit hook file.
This will also add a script to package.json like "prepare": "husky install"
. so that other devs will have to run yarn prepare
to setup .husky in their local systems.
We can update pre-commit with our custom commands those need to be run before committing the code. Like - yarn lint:fix && yarn test
Everytime we run git commit, these commands are going to be executed first. If there's any error with linting or tests, commit action wil fail.
lint-staged helps in running linters like eslint and prettier on staged files.
yarn add lint-staged -D
Add lint-staged config to package.json
"lint-staged": {
"*.{js,ts}": [
"yarn lint:fix"
]
}
Add the following to pre-commit hook:
yarn lint-staged && yarn test
When git commit
command is executed, it invokes husky
which invoke pre-commit
script.
pre-commit script will then invokes lint-staged
. lint-staged command will pick up the config present in package.json
or from .lintstagedrc
file and run the linters on specific files present in git staging area.
If everything goes well, code is committed or else error will be thrown adn commit will not executed.
commit-msg hook is used to validate the commit message and check if they are compatabile with conventional commit (which follow semantic versioning)
use npx husky add .husky/commit-msg
to generate commit-msg hook in .husky
Add this to .husky/commit-msg
which will check for specific type, scope, message in the commit.
#!/bin/sh
if ! head -1 "$1" | grep -qE "^(feat|fix|chore|docs|test|style|refactor|perf|build|ci|revert)(\(.+?\))?: .{1,}$"; then
echo "Aborting commit. Your commit message is invalid." >&2
exit 1
fi
if ! head -1 "$1" | grep -qE "^.{1,88}$"; then
echo "Aborting commit. Your commit message is too long." >&2
exit 1
fi
- jest
- @types/jest
- ts-jest
- eslint-plugin-jest
test command: jest --coverage --watch
Refer mrm package https://mrm.js.org/docs/getting-started