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

Question

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.

• 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?

Answer 1

In my case the issue was not in the lint-staged config, but was caused by WebStorm settings. Git: Enable staging area setting was turned off, that's why lint-staged couldn't detect any changed files. Turning the setting back on fixed the issue:

1. Press Ctrl + Shift + A (or ⌘ + Shift + A)
2. Type "git staging" and you'll see the option Git: Enable staging area
3. Click on the item to enable the feature

See Webstorm guide

Answer 2

another option: Use npx in the pre-commit config

.husky/pre-commit

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

npx lint-staged

Answer 3

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 <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"
  }
}

Answer 4

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"
  }
}

Answer 5

@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: https://dev.to/typicode/what-s-new-in-husky-5-32g5

or you can simply degrade your husky version :)