-
Download lint-staged and Prettier using npm i command:
npm i lint-staged prettier --save-dev
-
First, install by setting up the initial ESLint config file:
npx init eslint/config
After the file is installed, you will find it in the root directory as
.eslintrc.js
. -
Set up lint-staged in package.json:
"lint-staged": { "./**/*.js": [ "prettier --write", "eslint --fix" ] }
This configuration ensures that Prettier and ESLint will only be applied to staged changes and not the whole repository.
-
To check if the formatting and linting are set up properly, make small insignificant changes, stage them (using
git add -A
), and run the command:npx lint-staged
If everything written in the editor is properly formatted and no mistakes are made, no error will be thrown.
Now, let's set up Husky to add the lint-staged command in Git hooks as pre-commit hooks.
-
Install Husky as a devDependency in your project:
npm install husky --save-dev
-
Initialize Husky:
npx husky install
-
Create a Husky configuration file by adding the following script to your
package.json
file:"husky": { "hooks": { "pre-commit": "npx lint-staged" } }
This configuration tells Husky to execute the
lint-staged
command before every commit. -
Verify the Setup: Make a new change to your code, stage it (using
git add -A
), and then attempt to commit the changes:git commit -m "Your commit message"
If everything is set up correctly, Husky will run
lint-staged
, which in turn will handle linting and formatting before the commit is finalized.