Error while loading rule '@typescript-eslint/dot-notation'

Question

Today I run eslint，two script

 "lint-staged": "lint-staged",
 "eslint": "eslint --ext .tsx,.ts --fix ./src -c .eslintrc.js",

When I run npm run eslint // it's ok When I run npm run lint-staged // it's wrong

lint-staged's result ;

> lint-staged
  ❯ Running tasks for src/**/*.tsx
    ✖ eslint --fix [FAILED]
    ◼ git add
  
✖ eslint --fix :


Oops! Something went wrong! :(

ESLint: 7.10.0

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Occurred while linting /Users/***/components/BrowserInfo/Index.tsx
    at Object.getParserServices (/Users/fugang/workspace/xinao/channel-desk/node_modules/_@[email protected]@@typescript-eslint/experimental-utils/dist/eslint-utils/getParserServices.js:26:15)

In package lint-staged

What happend?

"lint-staged": {
    "src/**/*.tsx": [
      "eslint --fix -c .eslintrc.js",
      "git add"
    ]
  },

Answer 1

In case someone has the same problem as I had: my ESLint was working perfectly fine, but my VS Code extension was throwing this error. I had to change the Extension setting and reload it in order for it to work. Basically, I did this:

"eslint.workingDirectories": [{ "mode": "auto"}],

Also explained my problem and solution here

Answer 2

In case anyone outhere using .eslintrc.yml can use following to fix above issue

extends:
  - airbnb-typescript
parserOptions:
  project:
    - tsconfig.json

PS: tsconfig.json is in root folder, change it to match your location in case its not in root folder.

Answer 3

You have to add the following config to your .eslint.json file

{
    "parserOptions": {
        ...
        "project": ["path/to/your/tsconfig/file"]
        ...
    },
}