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.