How to use husky v6 with lint-staged?

[sarmong]

In my package.json I have lint-staged configuration.

Then, in ./husky/pre-commit I added npm run lint-staged

After git commit I get ERR! missing script: lint-staged

[leodr]

Use npx lint-staged instead of npm run lint-staged. npm run can only execute the scripts specified in the scripts section of your package.json

[DoctorDerek]

I can confirm @leodr's solution works including on Windows.

[olore]

This is what I did to get it working in a new create-react-app setup:

Edit .husky/pre-commit

1. Add npm run pre-commit

Edit package.json

2. Add "pre-commit": "lint-staged" to package.json under "scripts"
3. Add lint-staged config like you've always done:

  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },

[matheusggds]

Use npx lint-staged instead of npm run lint-staged. npm run can only execute the scripts specified in the scripts section of your package.json

that worked for me, at Windows 10. But, do you know why is my lint-staged like that?

If i have a npm scrip that runs lint-stage, it logs normally

[DoctorDerek]

There's something about how husky is set up now where it doesn't seem to find the scripts with npm run. Also, I learned npx --no-install lint-staged might be a better option, because it keeps npm from re(installing) lint-staged.

[SeyyedKhandon]

I do use lint-staged and did these steps to install and config them, now they are 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 <SeyyedKhandon@gmail.com>",
  "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"
  }
}

[luquera]

Use npx lint-staged instead of npm run lint-staged. npm run can only execute the scripts specified in the scripts section of your package.json

that worked for me, at Windows 10. But, do you know why is my lint-staged like that?

If i have a npm scrip that runs lint-stage, it logs normally

@matheusggds, did you find any solution for this?

[walkerrandolphsmith]

@luquera thanks for asking here #968

[cajotafer]

This is what I did to get it working in a new create-react-app setup:

Edit .husky/pre-commit

1. Add npm run pre-commit

Edit package.json

1. Add "pre-commit": "lint-staged" to package.json under "scripts"
2. Add lint-staged config like you've always done:

  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },

This is the solution I am using. It's also part of the husky docs

[bartekbugala]

This must be a problem with the implementation of commit hooks
There are 2 other ways you can try to fix this.

1. unset core.hookspath
   git config --unset core.hookspath (usually it needs to be repeated every time)

2. add lint-staged to package.json as scritpt
   And point to binary in node_modules/lint-staged/bin/....
   Just check if paths are working for windows / linux / mac

"scripts": {
    "lint-staged": "node node_modules/lint-staged/bin/lint-staged"
}