Plugin prettier not found

[LadIQe]

Hello, I have problem with prettier plugin not loaded correctly or not found. We upgraded whole project to newer packages, everything works fine, but we found out, that prettier/eslint is not working at all (at least in VS Code, in terminal it works).

We upgraded from

"devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-config-biq": "0.3.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsdoc": "^4.4.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.5.0",
    "eslint-plugin-redux-saga": "^1.0.0",
    "eslint-plugin-standard": "^4.0.0",
    "prettier": "^1.16.4"
}

to newer one:

"devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^6.6.0",
    "eslint-config-biq": "0.4.0",
    "eslint-config-prettier": "^6.5.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsdoc": "^17.1.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^2.2.0",
    "eslint-plugin-redux-saga": "^1.0.0",
    "eslint-plugin-standard": "^4.0.0",
    "prettier": "^1.16.4",
  }

and eslint/prettier stop working in VS Code, here is info from vs code terminal

[Info  - 3:11:15 PM] ESLint server stopped.
[Info  - 3:11:15 PM] ESLint server running in node v10.11.0
[Info  - 3:11:15 PM] ESLint server is running.
[Info  - 3:11:16 PM] ESLint library loaded from: /Volumes/SSD/Job/Bootiq/starter/frontend/node_modules/eslint/lib/api.js
[Error - 3:11:16 PM] 
Failed to load plugin 'prettier' declared in 'frontend/.eslintrc » eslint-config-biq': Cannot find module 'eslint-plugin-prettier'
Require stack:
- /Volumes/SSD/Job/Bootiq/starter/__placeholder__.js
Referenced from: /Volumes/SSD/Job/Bootiq/starter/frontend/node_modules/eslint-config-biq/index.js
Happened while validating /Volumes/SSD/Job/Bootiq/starter/frontend/src/components/Company/AddCompany.js
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-prettier' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-prettier' isn't installed correctly.

Consider running eslint --debug /Volumes/SSD/Job/Bootiq/starter/frontend/src/components/Company/AddCompany.js from a terminal to obtain a trace about the configuration files used.

We have also BE, where is same devDep configuration as old one and thats working correctly. Also I check all eslint configuration and everything looks good

Now I dont know if problem is with eslint plugin for VS Code or with eslint/prettier

[dbaeumer]

@LadIQe does the validation happen correctly when you use eslint in the terminal. If this is the case can you please provide me with a GitHub repository I can clone that demos what you are experiencing.

[LadIQe]

@dbaeumer hello, thank you for reply. Yes validation is working in terminal, but inside VS Code it doesnt work.

I can give you repo for eslint-biq, which we are using:
https://www.npmjs.com/package/eslint-config-biq

than we have .eslintrc

{
  "plugins": [
    "jsdoc"
  ],
  "rules": {
    "jsdoc/require-jsdoc": 0
  },
  "extends": ["biq", "biq/react"]
}

Unfortunately, I cant give you repo for project, because its our internal private project.

[dbaeumer]

A GitHub repository I can clone that demos what you are seeing is highly appreciated. Without it it will be hard to understand what causes this for you.

[LadIQe]

yes I understand you, but as I said, its project for our customer and we cant share any code. But if it can help you, its based on create-react-app where we are using eslint-config-biq, thats all

almost forget, we are using docker, but as I said, I cant give you repo for project, and also we are using gitlab, not github

[markmckim]

I wonder if this is related to this issue (which is still impacting me)...

#759 (and possibly #793)

Seems like ESLint / VSCode cannot find plugins when running as part of a multi project workspace, but if I open the project in its own VSCode window (or run lint via terminal), it works fine.

Using create-react-app in case that makes a difference

[dbaeumer]

@LadIQe it must not be your private repository. I could also be a repository that only contains an example that demos what you are seeing.

[LadIQe]

@dbaeumer here is sample project

https://github.com/LadIQe/eslint-test

[dbaeumer]

@LadIQe in the example you provide which folder do you open in VS Code ?

[LadIQe]

@dbaeumer whole project, because we are constantly changing FE and BE code, so always switching is not a good idea

before it works great but now after upgrading packages it doesnt work

[dbaeumer]

Then you need to set the workingDirectory settings to tell VS Code eslint to treat them as working dirs. See https://github.com/microsoft/vscode-eslint. Best with changeProcessCWD set to true.

[markmckim]

So do we need to set every single directory in this setting? e.g. if I have one large workspace with 10+ projects, and cloning other repos regularly, I need to update this setting each time? Is there not a way to have this auto detect to current directory you are working in? Thanks!

[LadIQe]

@dbaeumer thank you for your quick fix, now its working like before (at least in directory, which is set under eslint.workingDirectories). But, as @markmckim mentioned, is there auto detect function, which can detect it by itself? thank you

[dbaeumer]

For auto detection see: #745

The problem is that the auto detection is not trivial without reimplementing internals of the ESLint npm module.

Interestingly devs have no problem doing a cwd in a terminal to make this work since eslint in the terminal will fail in the root directories of these setups as well. Or does this work in the roots for you and not in VS Code.

[LadIQe]

I spoke with other devs in my team and we are going to use eslint.workingDirectories. Its not that great, but at least its working.

But interestingly, before it worked well