How do I get lint-staged working with Husky version 6

I try to use Husky's pre-commit and lint-staged.

Those are installed:

"husky": "^5.1.3",
"lint-staged": "^10.5.4",

In package.json I have:

"scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", "start": "npm run develop", "serve": "gatsby serve", "clean": "gatsby clean", "test": "echo \"Write tests! -> " && exit 1", "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color", "isready": "npm run format && npm run lint && npm run build" }, "husky": { "hooks": { "pre-commit": "lint-staged", "pre-push": "npm test", } }, "lint-staged": { "./src/*.{js,jsx,ts,tsx}": [ "npm run format", "npm run lint", "git add" ] },

If I run npm run lint, currently I have 2 problems (1 error, 1 warning). So when I run git commit, I don't expect to be able to commit, right? But I can proceed and finish the commit.

What's wrong?

Update:

I downgraded husky to 4.3.8:

"husky": "^4.3.8",
"lint-staged": "^10.5.4",

Inside package.json, in my scripts I have:

"prettier": "prettier '**/*.{js,jsx,ts,tsx}' --write",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",

And:

"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{ts,tsx,js,jsx}": [ "npm run prettier", "npm run lint", "git add" ] },

When I do a commit, Husky is still not fired off. What's wrong?

Update 2:I couldn't get Husky 4 to work so I upgraded to version 6:

npm install husky@6 --save-dev \ && npx husky-init \ && npm exec -- github:typicode/husky-4-to-6 --remove-v4-config

Now it works fine.

The only thing I can't get to work is lint-staged.

• I added the hook npx husky add .husky/pre-commit "lint-staged"

But then I get .husky/pre-commit: line 4: lint-staged: command not found? How do I get lint-staged working with Husky version 6?

4 Answers

Making lint-staged working with Husky version 6 by adding:

// .husky/pre-commit
npm run pre-commit

and:

// package.json
{ "scripts": { "pre-commit": "lint-staged" }
}

Based on this husky github issue, just do these steps to make it work(we did it and it is working fine):

1. npx husky-init
2. yarn
3. npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
4. yarn add @commitlint/config-conventional @commitlint/cli --dev

.commitlintrc.json:

{ "extends": ["@commitlint/config-conventional"]
}

.lintstagedrc:

{ "src/**/*.+(js|json|ts|tsx)": [ "eslint" ], "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [ "prettier --write" ]
}

.husky/pre-commit:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn pre-commit-lint

Finally, add pre-commit-lint script to package.json:

{ "name": "pwa-react-scaffold", "version": "0.1.0", "private": true, "author": "SeyyedMahdi Hassanpour <>", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "analyze": "yarn build && source-map-explorer 'build/static/js/*.js'", "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .", "check-types": "tsc", "prettier": "prettier --ignore-path .gitignore \"src/**/*.+(js|jsx|json|ts|tsx)\"", "format": "yarn prettier --write", "check-format": "yarn prettier --list-different", "validate": "npm-run-all --parallel check-types check-format lint build", "prepare": "husky install", "pre-commit-lint": "yarn check-types && yarn lint-staged" }, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", "node-sass": "^5.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "source-map-explorer": "^2.5.2", "typescript": "^4.0.3", "web-vitals": "^0.2.4", "workbox-background-sync": "^5.1.3", "workbox-broadcast-update": "^5.1.3", "workbox-cacheable-response": "^5.1.3", "workbox-core": "^5.1.3", "workbox-expiration": "^5.1.3", "workbox-google-analytics": "^5.1.3", "workbox-navigation-preload": "^5.1.3", "workbox-precaching": "^5.1.3", "workbox-range-requests": "^5.1.3", "workbox-routing": "^5.1.3", "workbox-strategies": "^5.1.3", "workbox-streams": "^5.1.3" }, "devDependencies": { "@commitlint/cli": "^12.1.1", "@commitlint/config-conventional": "^12.1.1", "@typescript-eslint/eslint-plugin": "^4.22.0", "@typescript-eslint/parser": "^4.22.0", "eslint-config-prettier": "^8.2.0", "eslint-plugin-jest-dom": "^3.8.0", "eslint-plugin-testing-library": "^4.1.0", "eslint-plugin-unused-imports": "^1.1.1", "husky": "^6.0.0", "lint-staged": "^10.5.4", "npm-run-all": "^4.1.5", "prettier": "^2.2.1" }
}

@meez As you install husky@^5.1.3 version, Husky changed the configuration step after 5.0.0.

Configure Husky@^5.0.0:

 npm i husky npx husky install husky install .config/husky husky add .config/husky/pre-commit "npm test"

Link:

or you can simply degrade your husky version :)

another option: Use npx in the pre-commit config

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged