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-configNow 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-commitand:
// 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):
npx husky-inityarnnpx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'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-lintFinally, 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 :)
5another option: Use npx in the pre-commit config
.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
