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

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 `lint-staged@9.2.0` +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,