Cannot find module '@typescript-eslint/parser' when using Prettier Eslint

Question

I'm getting the following error from Prettier Eslint Output on VSCode when saving the file.

Error: Cannot find module '@typescript-eslint/parser'
Require stack:
- c:\Users\vtnor\.vscode\extensions\rvest.vs-code-prettier-eslint-0.4.1\dist\extension.js
- c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-fork.js

My package json is:

[...]
"typescript": "^4.2.2",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"eslint": "^7.21.0",
"prettier": "^2.2.1",
"prettier-eslint": "^12.0.0",
[...]

Answer 1

I actually had this problem the other day; you need to go to your .eslintrc and make sure that the module is there under the parser property of the config. Should look something like this in the end:

{
  //...

  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],

  //...
}

This should cover the essentials regarding dependencies in your linter. Hope it helps.

Edit

I checked GitHub for this issue, might not be the same as the one I had, check this link please.

Answer 2

Had this problem also, I resolved disabling, then reloading and re-enabling ESLint extension of VSCode.

Hope this helps ;)