Ah okay so the answer here was to implement the right Prettier rules in .prettierrc.

The VSCode Prettier settings can be set specifically for the workspace, which was what caused me confusion (I had trailingComma set to none in another workspace which made me confused about why that workspace was correctly formatting things).

I added this code to .prettierrc, which makes the Prettier formatter consistent with the ESLint rules:

{
  "arrowParens": "avoid",
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

I (mistakenly?) thought that Prettier automatically derived its formatting options from the ESLint rules.

1. Select File -> Preferences -> Settings (Ctrl + comma) and search form formatter
2. Set Prettiers as Default formatter.

If above does not work:

ctrl+shift+p > Format Document With... > Configure Default Formatter... > Prettier - Code formatter

This also work with ctrl+shift+I

Update:

Since writing the below, I discovered that it may be more economical to keep ESLint on with the following in settings.json:

{
  // ...
  "eslint.enable": true,
  "eslint.run": "onSave",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.autoSave": "off",
  // ...
}

• Enable ESLint and only run it on save.
  • This avoids ESLint from reporting errors everywhere when you're writing code.
• Enable Prettier and have it format on save.
  • ESLint will only check the file after Prettier has formatted it.
• Disable auto-saving features in VS Code.
  • I choose to manually save because I can save it when I think the code doesn't have any syntax errors, which ensures that Prettier can format the file on save.
  • VS Code automatically saves your edit session to disk, so even if you quit with unsaved changes or if something untoward happens, you'll restore session with the same unsaved changes next time. So auto-saving of files is not really necessary.

Note that if your entire project is not already formatted with Prettier, I suggest doing so using npx prettier --write ..

Original answer:

Quick Fix: Disable the ESLint extension in VSCode.

Explanation: These errors are generated by a lint tool, most likely ESLint.

It happens when you install both the eslint package as well as the "ESLint" extension in VS Code. The package checks to make sure the code is formatted well and throws errors if it's not. The extension runs the package seamlessly and dresses your VS Code window with those errors (hence the red squiggly lines). Good news is, you can have eslint package installed in your project without the extension. Prettier can still auto-format your code using the package without the extension.

Answer: If you have installed the ESLint extension, you can simply disable it, either by using the "eslint.enable": false or by finding ESLint in the Extensions sidebar and disabling it.

This Stack Overflow question has many answers which guide you on the matter.

Note: Prettier is not a lint tool. It's a formatter.

Bonus Tip: Run npx prettier --write . in your project to format all files according to your Prettier rules.