vue.jseslintlint-staged

lint-staged generates new .eslintcache file on commit


I'm creating a new Vue project via npm init vue@latest and select everything (Eslint with Prettier)

I'm using the following setup

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?


Solution

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