~2 min read|
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.
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.
"prettier-eslint.eslintIntegration”: truein Settings (JSON) for VSCode. 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.
Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!