Prettier-vscode: Failed to load plugin

[saostad]

Error Message in VSCode Output Prettier Console:

Failed to load plugin '@typescript-eslint' declared in 'CLIOptions'c:\Users\***\Projects\vpn-logs-post-analysis\src\app.ts:: Cannot find module '@typescript-eslint/eslint-plugin'
Require stack:
- C:\Users\***\AppData\Local\Programs\Microsoft VS Code\__placeholder__.js

Package.json:

{
  "name": "vpn-logs-post-analysis",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^12.0.10",
    "@typescript-eslint/eslint-plugin": "^1.11.0",
    "@typescript-eslint/parser": "^1.11.0",
    "eslint": "^6.0.1",
    "eslint-config-prettier": "^6.0.0",
    "typescript": "^3.5.2"
  }

.eslintrc:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": ["plugin:@typescript-eslint/recommended", "prettier"],
  "rules": {
    "@typescript-eslint/restrict-plus-operands": "error"
  }
}

and this is not specificly to that module. with configuration below:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint","prettier"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/restrict-plus-operands": "error"
  }
}

I got this error:

Failed to load plugin 'prettier' declared in 'CLIOptions'c:\Users\***\Projects\vpn-logs-post-analysis\src\app.ts:: Cannot find module 'eslint-plugin-prettier'
Require stack:
- C:\Users\***\AppData\Local\Programs\Microsoft VS Code\__placeholder__.js

[alexwendte]

I am getting the same error but with the plugin "import"

Failed to load plugin 'import' declared in 'CLIOptions'c:\git\aws-tms-ash-to-otm\src\lib\utilities\config.ts:: Cannot find module 'eslint-plugin-import'
Require stack:
- C:\Users\WENDTEP\AppData\Local\Programs\Microsoft VS Code\__placeholder__.js

I have the eslint, prettier, and eslint-plugin-import all installed locally as linting with eslint is successful

I also have the setting: prettier.eslintIntegration": true

[EIrwin]

@alexwendte I am getting same issue and haven't found a fix yet.

[saostad]

I find a temporary fix for that:

• npm install -D prettier
• install Run on Save extension on VSCode
• in VSCode settings add:

"emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "\\.(js|ts)x?$",
        "cmd": "${workspaceRoot}/node_modules/.bin/prettier.cmd --write \"${file}\""
      }
    ]
  }

now you can even uninstall the vscode-prettier extension 🥇

[josecarlosns]

I have encountered a similar issue, but with the plugin import, the same as @alexwendte and @EIrwin .

What fixed the issue for me was to disable the prettier-eslint integration option, which kinda makes sense, after all why and where is Prettier trying to use an ESLint plugin? That could only be prettier-eslint.

So you just have to set this in your settings.json:

{
  "prettier.eslintIntegration": false
}

Since this comes by default (I think), you can just remove that configuration. And also, all prettier-eslint does is run eslint --fix after prettier, so if you configured your ESLint to work with Prettier you probably won't even notice anything.

[ntotten]

Duplicate of #870

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.