Note that this only works for NextJS projects
- (needed for good eslinting) Add a
.eslintrc.json
file to the root of your project with the following contents:
{
"extends": "next/core-web-vitals"
}
- (optional prettier config) Add a
.prettierrc
file to the root of your project with the following contents:
{
"tabWidth": 2,
"useTabs": true,
"printWidth": 140,
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": false,
"singleAttributePerLine": true
}
- install
husky
,lint-staged
, andprettier
as dev dependencies
npx husky-init
npm install
npm install --save-dev lint-staged
npm install --save-dev prettier
- The
npx husky-init
command should have added a.husky
directory to your project. Modify thepre-commit
file so it's contents are:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint
npx lint-staged
- At the bottom of your
package.json
add the following:
[...]
"lint-staged": {
"*.{js,ts,tsx,json,graphql}": [
"prettier --write"
]
}
[...]
That's it. Your commits should now be properly linted and prettified!