Next.js | Adding Husk and Lint-Staged
Next.js, React.js, Lint-staged, Husky
List-staged and Husk is an amazing combination to add in your project to ensure that all necessary scripts were run before your commit our push to a repository. Basically, husk is a hook that you can configure to run scripts like 'lint' and 'testing' in pre-commit. By the end of this post, you will be able to configure pre-commits in your javascript project.
Getting Started
Installing libraries
yarn add -D lint-staged husky
Creating a script
Create a script that we're going to run in pre-commit in package.json file, in our case, we're going to run eslint in src folder and will stop if found some warning.
...
"script": {
"lint": "eslint src --max-warnings=0"
}
...
Creating a pre-commit hook
In our package.json add the configuration bellow
...
"husk": {
"hooks": {
"pre-commit": "lint-staged",
}
}
"lint-staged": {
"src/**/*": ["yarn lint --fix"]
}
...
Now, always you commit something in your project, 'yarn lint —fix' will be run and if any warning or error is found your commit is going to be cancelled, This is supercool and ensure your repository clean preventing unnecessary 'fixing' commits.