/* Code Comments */

ESLint, Prettier, And VSCode - When They Stop Cooperating

October 14, 2019

A while ago I installed the Prettier extension in VSCode and configured a few defaults in my global settings. I like having a global configuration so that I don’t have to go through the steps of setting up each project. Sometimes, however, that can create problems. For example, when ESLint and Prettier stop cooperating.

When that happens, Prettier just stops working. Kindly, VSCode alerts me, with a little x in the bottom bar, but the error messages have always been a bit cryptic. vscode-prettier-error

Here’s a recent example:

10/4/2019, 8:52:55 AM:
----------------------
Failed to load plugin 'react-hooks' declared in 'CLIOptions'/Users/stephen/_coding/personal/fem-courses/fem-complete-intro-to-react-v5-adopt-me/src/SearchParams.js:: Cannot find module 'eslint-plugin-react-hooks'
Require stack:
- /Users/stephen/_coding/personal/fem-courses/complete-intro-to-react-v5/__placeholder__.js

Since I could still get formatting to work by running prettier in the command line, it’s never felt urgent. Still, today, I decided to dig into it to see if there was an answer.

Apparently, this is a known issue and has to do with how ESLint and Prettier interact.

There are threads for similar issues for Atom1, VSCode2, and Prettier3. I’m sure there are others.

Reading through the threads, I found a solution that works at least for VSCode, per @2Color:4

Try changing "prettier.eslintIntegration": true to "prettier-eslint.eslintIntegration”: true in Settings (JSON) for VS Code. Fixed the problems that I was having after upgrading to ESLint 6.x.

I made the change and suddenly everything was back to normal!

Actually - that’s not totally true. Hovering over the new line, VSCode was telling me that it was an “Unknown Configuration Setting”. So, I deleted it all together. It still works! At least in this project, which does have a .prettierrc, even if it’s just an empty set of {}.

I’ll be keeping an eye on this, but if nothing else, at least I have a working solution for the future.

Footnotes


Stephen Weiss

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!