Lint-staged: Eslint not producing the error messages when run as a precommit hook using lint-staged

[nobodyme]

Description

Bug, eslint not producing the error messages when run as a precommit hook using lint-staged

Steps to reproduce

Simply create a react app using create-react-app and fill in the following configs

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.

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.

Debug Logs

I added an additional unused variable in src/App.js that eslint should scream about ran lint-staged. You can find that it checks the corresponding file, so I hope the blob is right but it isn't throwing any errors on the terminal. Also attached the output when I run eslint separately below.

➜  hello-world git:(master) ✗ ./node_modules/.bin/lint-staged --debug
  lint-staged:bin Running `[email protected]` +0ms
  lint-staged Loading config using `cosmiconfig` +0ms
  lint-staged Successfully loaded config from `/Users/nobody1/leisure/learning/react/hello-world/packag
e.json`:
  lint-staged { '*.{js, jsx}': [ 'eslint --fix', 'git add' ],
  lint-staged   '*.{js, jsx, json, html, css}': [ 'prettier --write', 'git add' ] } +7ms
  lint-staged:cfg Validating config +0ms
Running lint-staged with the following config:
{
  '*.{js, jsx}': [
    'eslint --fix',
    'git add'
  ],
  '*.{js, jsx, json, html, css}': [
    'prettier --write',
    'git add'
  ]
}
  lint-staged:run Running all linter scripts +0ms
  lint-staged:git Running git command [ 'rev-parse', '--show-toplevel' ] +0ms
  lint-staged:run Resolved git directory to be `/Users/nobody1/leisure/learning/react/hello-world` +21m
s
  lint-staged:git Running git command [ 'diff', '--staged', '--diff-filter=ACM', '--name-only' ] +21ms
  lint-staged:run Loaded list of staged files in git:
  lint-staged:run [ 'package.json', 'src/App.js' ] +16ms
  lint-staged:gen-tasks Generating linter tasks +0ms
  lint-staged:gen-tasks Generated task: 
  lint-staged:gen-tasks { pattern: '*.{js, jsx}',
  lint-staged:gen-tasks   commands: [ 'eslint --fix', 'git add' ],
  lint-staged:gen-tasks   fileList:
  lint-staged:gen-tasks    [ '/Users/nobody1/leisure/learning/react/hello-world/src/App.js' ] } +4ms
  lint-staged:gen-tasks Generated task: 
  lint-staged:gen-tasks { pattern: '*.{js, jsx, json, html, css}',
  lint-staged:gen-tasks   commands: [ 'prettier --write', 'git add' ],
  lint-staged:gen-tasks   fileList:
  lint-staged:gen-tasks    [ '/Users/nobody1/leisure/learning/react/hello-world/src/App.js' ] } +6ms
Stashing changes... [started]
  lint-staged:git Running git command [ 'status', '--porcelain' ] +29ms
Stashing changes... [skipped]
→ No partially staged files found...
Running linters... [started]
Running tasks for *.{js, jsx} [started]
Running tasks for *.{js, jsx, json, html, css} [started]
  lint-staged:make-cmd-tasks Creating listr tasks for commands [ 'eslint --fix', 'git add' ] +0ms
  lint-staged:make-cmd-tasks Creating listr tasks for commands [ 'prettier --write', 'git add' ] +8ms
eslint --fix [started]
prettier --write [started]
  lint-staged:task cmd: eslint +0ms
  lint-staged:task args: [ '--fix',
  '/Users/nobody1/leisure/learning/react/hello-world/src/App.js' ] +0ms
  lint-staged:task execaOptions: { preferLocal: true, reject: false, shell: false } +0ms
  lint-staged:task cmd: prettier +4ms
  lint-staged:task args: [ '--write',
  '/Users/nobody1/leisure/learning/react/hello-world/src/App.js' ] +0ms
  lint-staged:task execaOptions: { preferLocal: true, reject: false, shell: false } +0ms
prettier --write [completed]
git add [started]
  lint-staged:task cmd: git +321ms
  lint-staged:task args: [ 'add',
  '/Users/nobody1/leisure/learning/react/hello-world/src/App.js' ] +0ms
  lint-staged:task execaOptions: { preferLocal: true, reject: false, shell: false } +0ms
git add [completed]
Running tasks for *.{js, jsx, json, html, css} [completed]
eslint --fix [completed]
git add [started]
  lint-staged:task cmd: git +880ms
  lint-staged:task args: [ 'add',
  '/Users/nobody1/leisure/learning/react/hello-world/src/App.js' ] +0ms
  lint-staged:task execaOptions: { preferLocal: true, reject: false, shell: false } +0ms
git add [completed]
Running tasks for *.{js, jsx} [completed]
Running linters... [completed]
  lint-staged tasks were executed successfully! +1s

Eslint output below.

➜  hello-world git:(master) ✗ ./node_modules/.bin/eslint src/App.js --fix

/Users/nobody1/leisure/learning/react/hello-world/src/App.js
  4:5  warning  'x' is defined but never used             no-unused-vars
  4:8  warning  'madsfasdsssf' is defined but never used  no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

Environment

• OS: macOS High Sierra
• Node.js: v11.3.0
• lint-staged: v9.2.0,

[iiroj]

I think the exit code of eslint is 0 in case of warnings, that's why it's not failing here. Maybe you can try running it in lint-staged with the --max-warnings=0 option, or alternatively set the rule level to error.

[nobodyme]

Would you be kind enough to point me, how to do either of those?

[zachdixon]

Hi, I'm having the same issue and trying to figure out a solution. The --max-warnings=0 works when running the lint-staged script directly, but still not working via precommit hook.

Output of running directly:

lando npm run precommit

> [email protected] precommit /app/wp-content/themes/tpg-2016
> lint-staged

  ↓ Stashing changes... [skipped]
    → No partially staged files found...
  ❯ Running tasks...
    ❯ Running tasks for *.{js,jsx}
      ✖ eslint --fix --max-warnings=0
        git add
    ↓ Running tasks for *.{css,scss} [skipped]
      → No staged files match *.{css,scss}



✖ eslint --fix --max-warnings=0 found some errors. Please fix them and try committing again.

/app/wp-content/themes/tpg-2016/client/js/components/card-search/components/list.jsx
  35:3  error  propType "cards" is not required, but has no corresponding defaultProps declaration  react/require-default-props

✖ 1 problem (1 error, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] precommit: `lint-staged`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] precommit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/node/.npm/_logs/2020-01-15T20_02_24_882Z-debug.log

Output of running that same command in a precommit hook:

git commit -m "Update lint staged eslint options"
Running lint-staged

> [email protected] precommit /app/wp-content/themes/tpg-2016
> lint-staged

Stashing changes... [started]
Stashing changes... [skipped]
→ No partially staged files found...
Running tasks... [started]
Running tasks for *.{js,jsx} [started]
Running tasks for *.{css,scss} [started]
Running tasks for *.{css,scss} [skipped]
→ No staged files match *.{css,scss}
eslint --fix --max-warnings=0 [started]
eslint --fix --max-warnings=0 [failed]
→ 
Running tasks for *.{js,jsx} [failed]
→ 
Running tasks... [failed]
Checking PHPCS
[pre-commit b16bf383b] Update lint staged eslint options
 2 files changed, 7 insertions(+), 7 deletions(-)

So, 2 things here actually:

1. The terminal output is different, I much prefer the first one but not sure why it's different when running from a git hook, or possibly it's because I'm running it via lando in a docker container?
2. eslint says it failed but didn't output the errors

[zachdixon]

I was able to fix the hook failing by checking the exit code of the lint-staged command, but it's still not outputting the eslint errors

[lsh246]

[edit - deleting incorrect comment. Thanks to @alexilyaev for the correction.]

@zachdixon in your lint-staged section, use --max-warnings 0, not --max-warnings=0. The following in my package.json file works for me:

  "lint-staged": {
    "*.{ts,tsx,js}": [
      "eslint --max-warnings 0",
      "git add"
    ]
  },

[alexilyaev]

Hey @zachdixon could you post the relevant section of your package.json file to see how you configured lint-staged?

@nobodyme presumably you've fixed this by now, but to pass no-warnings in, you'd modify your package.json file as follows:

"lint-staged": {
  "*.js": [
      "eslint --fix --no-warning",
      "git add"
  ],
  "*.{js, jsx, json, html, css}": [
      "prettier --write --no-warning",
      "git add"
  ]
},

There's no --no-warning flag, it should beeslint --fix --max-warnings 0`.

[dzoba]

I have also encountered this issue. Neither the --no-warning nor the --max-warnings 0 suggestions worked for me.

For now I have used the workaround below. lint-staged is used for css, html, etc. Javascript/jsx are verified outside of lint-staged

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged; npm run lint"
    }
  },

[iiroj]

I can't really help without debug logs. Without them, I assume that _lint-staged_ is running in a another directory than the eslint config file, and thus can't find it.

Does it work if you explicitly specify the eslint config file in your _lint-staged_ config:

{
  "*.js": "eslint --config ./.eslintrc.json  --fix"
}

[okonet]

The command is wrong to start with: you are running npm run lint via husky and not lint-staged. Please refer to examples in the documentation to setup it correctly or use npx mrm lint-staged. Please remove your husky setup prior doing so.

[okonet]

Also @iiroj i can confirm that running eslint via npm scripts won’t show any errors if found. So maybe that’s a problem as well.

[iiroj]

@okonet what do you mean? Let me try...

Are you adding the -- to allow npm to pass on arguments:

{
  "*.js": "npm run lint --"
}

EDIT: Works for me, actually both with and without the --.

EDIT2: My lerna-monorepo's config:

// .lintstagedrc.json
{
    "*.{js,ts,tsx}": "npm run lint:ts",
    "*.json": "npm run lint:json"
}

[okonet]

No I tried without since it was an old react-boilerplate repo and it didn’t print any errors until I changed to just running eslint from lint-staged config.

[791106912]

I also have this problem.

[nesl247]

Also having the same issue. It's weird that eslint itself is not showing anything, but it fails when run with lint-staged.

[aaronlutze]

I'm also having the same issue, and none of the recommendations above have worked unfortunately.

[harrytran998]

I'm also having the same issue, I tried to remove the repo and clone again but it didn't work.

[tsekhan]

Also experiencing this issue. As a workaround you can downgrade lint-staged to version <8.0.0.
This issue is not related to ESLint, I tested it with simple script exit 1 - same behaviour.

[iiroj]

Please post debug logs, So that we can see what might be causing this.

Configure lint-staged with: lint-staged --debug --verbose, maybe also eslint has a similar setting.

[tsekhan]

It's weird but today I can't reproduce this issue.

[theghostyced]

Just encountered this issue now, switching the eslint version to ^6.8.0 and downgrading lint-staged to ^10.0.8
seemed to solve the issue.

Hopefully it helps someone there

[Ysalahed]

for those of u who are still facing this issue, upgrading nodejs from 10.x to the 15.x (current LTS) seems to have solved the issue for me