Hey everyone, I'm having a frustrating issue with VS Code's autoformatting feature when using Prettier and ESLint. I used to fix formatting issues manually by clicking 'Fix all problems' when ESLint flagged them, but I decided to streamline my process by enabling 'format on save'. I added the necessary settings in my project, and it seems to work. However, I'm dealing with a strange conflict: when I save a function formatted like `some function => {}`, it adds a space inside the curly braces (`{ }`), which then causes an ESLint error telling me to remove the whitespace. This conflict between Prettier and ESLint is driving me nuts! I've tried reverting the VS Code settings, but nothing seems to stop this behavior. Can anyone help me figure this out?
2 Answers
It sounds like your VS Code might not be using Prettier as the formatter. You can check that by using 'format on save', and then running `prettier --write .` from the command line. If it changes your files, that suggests VS Code is using a different formatter. Make sure to install the Prettier extension, and then you can set your default formatter in the settings to ensure Prettier is the one being used. Once you have that sorted out, it should help resolve your problem!
You might want to check your ESLint configuration too. If you have conflicting rules that deal with whitespace, it could be causing this issue. Try disabling those specific rules temporarily to see if that resolves the issue. If it does, you can find a way to tweak them without causing conflicts with your prettier settings.
But I didn’t have any conflicting rules when I didn’t use auto-format on save. It’s so weird!
I will try that, thanks for the tip!