JavaScript: prettier Formatting vs. eslint prettier Warnings

[JPustkuchen]

Prettier formatting (Format Document) seems to use different rules than eslint code warnings.

This can be easily reproduced using double vs. single quotes: document.getElementById("example"); doesn't show code warnings. But when running "Format document", they are changes to single quotes:

document.getElementById("example"); then shows code warnings and provides a quick-fix to turn them into double quotes again.

So you're getting into an infinite human fixing-loop 😆

One of them seems to use the wrong rules. Which are correct for Drupal and how can we fix that?

[joshsedl]

Prettier should ignore JS files (and maybe other file types as well?). We are using prettier as an eslint extension. For the time being, you can simply deactivate the VSCode Extension, as the ESLint extension is using prettier under the hood. Let's discuss, if we even need the prettier extension activated.

[joshsedl]

Hm weird, this shouldn't happen, we even configure the correct path in the vscode workspace config:

"prettier.configPath": "web/core/.prettierrc.json",

Maybe the extension's option names have changed? Or we need an absolute path?

[JPustkuchen]

Perhaps we should first try what happens, if we remove that line and which code style is then used for which command? (see example in the issue summary)

I think first we need to find out, which of them works as expected and which doesn't and then how to solve it as smart and simple as possible?

[joshsedl]

Hm, I can not reproduce this issue... If I use double quotes and hover over the part, where I use the double quotes, the following quick fix appears:

And if I then format the code, they become single quotes, as expected, and the warning disappears:

[joshsedl]

Furthermore, the default formatter is correctly set to eslint: "[javascript]": { "editor.defaultFormatter":"dbaeumer.vscode-eslint" },

[JPustkuchen]

If this happens, typically the reason is, that the wrong default formatter is selected!

ESLint is the correct formatter for JavaScript!

In my case "Prettier" was selected as default, but it would be correct to have ESLint as default.

[JPustkuchen]

Also this can happen if the Workspace settings.json is outdated. Then it's best to simply set up a fresh instance.