lint-staged generates new .eslintcache file on commit - vue.js

Question

I'm creating a new Vue project via npm init vue#latest and select everything (Eslint with Prettier)
I'm using the following setup
OS: Win11
node: v17.4
npm: v8.4
I setup lint-staged via npx mrm#2 lint-staged. For testing purposes I add a new file inside the src directory
// calc.js
function
add
(numOne,
numTwo) {
return numOne +
numTwo;
}
When committing the new file the linter fixes the code style as expected. But after that I manually have to delete a generated .eslintcache file.
Older posts say I should add
*.eslintcache
to the .gitignore file. But I compared the generated .gitignore file with the generated one from the Vue CLI and both don't have this line. When using the Vue CLI the cache file doesn't appear.
So are there any other solutions or is there something I missed?

Answer 1

The .eslintcache file is created from ESLint's --cache flag, which is included in the default linter command of lint-staged:
// package.json
{
"lint-staged": { 👇
"*.{vue,js,jsx,cjs,mjs}": "eslint --cache --fix",
"*.{js,css,md}": "prettier --write"
}
}
You can either remove the --cache flag:
// package.json
{
"lint-staged": {
"*.{vue,js,jsx,cjs,mjs}": "eslint --fix",
"*.{js,css,md}": "prettier --write"
}
}
...or set the cache file location with the --cache-location flag (e.g., specify node_modules/.cache):
// package.json
{
"lint-staged": { 👇
"*.{vue,js,jsx,cjs,mjs}": "eslint --cache --fix --cache-location ./node_modules/.cache/.eslintcache",
"*.{js,css,md}": "prettier --write"
}
}