Eslint precommit husky hook is not working as expected in create-react-app project

Question

Here's my configuration

package.json

{
    "name": "hello-world",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-scripts": "3.0.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.js": [
            "eslint --fix",
            "git add"
        ],
        "*.{js, jsx, json, html, css}": [
            "prettier --write",
            "git add"
        ]
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^6.0.0",
        "eslint-plugin-prettier": "^3.1.0",
        "husky": "^3.0.0",
        "lint-staged": "^9.2.0",
        "prettier": "^1.18.2"
    }
}

Now if I run that simply on the project like, ./node_modules/.bin/eslint . , it is working as usual. Displays the changes that need to be made in the file but does not work as a pre-commit hook, prettier is working though. I still see that the eslint is running before every commit from the command line but I don't see any output presented. What could be the issue?

Changing the line to, eslint * --fix, shows me fixes that are to be made in all files, even .css and .md files.
Making it eslint *.js --fix tells me, no files matching the pattern were found.
Even eslint . --fix doesn't work.

My folder structure is a simple create-react-app format, if that info is needed. Full repo here

I'll post the eslintrc and prettierrc file below as well,

.prettierrc

{
"singleQuote": false
}

.eslintrc

{
"extends": ["react-app", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

Clarifications:

1) I had to use the longer format version of prettier configuration, as opposed to plugin:prettier/recommended because I ran into this error while trying to have a separate prettierrc config file instead of having it inline in package.json

2) I had to use a lower version of eslint because the newer version was throwing random errors from a plain create-react-app and hence had to downgrade it as discussed here.

score 0 · Answer 1 · answered Nov 28 '19 at 09:37

Did you try to use the complete path of the said linters in your package.json?

Something like this -

"lint-staged": {
    "*.{js,tsx}": [
        "./node_modules/.bin/eslint --fix",
        "git add"
    ],
    "*.{js, jsx, json, html, css}": [
        "./node_modules/.bin/prettier --write",
        "git add"
    ]
}

For me, it works as expected.

Reference Tutorial

Eslint precommit husky hook is not working as expected in create-react-app project

1 Answers1