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! -> https://gatsby.dev/unit-testing\" && 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.
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?
It's specifically designed to work on "staged" files, thus the name. This means files you've changed or created but haven't yet committed to your project. Working on staged files limits the number of files you need to lint at any given time and makes the workflow faster.
Here's how: go to your monorepo root. yarn add lint-staged husky --ignore-workspace-root-check (you need the --ignore-workspace-root-check flag so the packages will be installed in the root of the project) Setup lint-staged and husky the way you prefer (either in the package.
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):
npx husky-init
yarn
npx 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-lint
Finally, add pre-commit-lint
script to package.json
:
{
"name": "pwa-react-scaffold",
"version": "0.1.0",
"private": true,
"author": "SeyyedMahdi Hassanpour <[email protected]>",
"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"
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With