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.
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 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.
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!