Result of formatting in VS Code, Web Editor, and eslint --fix are different

Glitch VS Code Extension
1

Test project: https://glitch.com/edit/#!/lyrical-everlasting-error

Test project is a plain hello-express project with a single eslint rule which removes semicolons.

First I use eslint --fix to format the file server.js.

VS Code Glitch extension ships with a formatter plugin. I use that to format the file again.

Finally I press the “Format the file” button on the Web Editor.

Only the command line eslint --fix has respected my .eslintrc.js. Neither the VS Code Glitch extension formatter nor the Web Editor button did.

Confusingly, the VS Code Glitch extension formatter and the Web Editor button do not agree. They actually differ pretty drastically.

You can see the difference in the latest three checkpoints.

2

Hey @louy2,

I think the “Format the file” button in the Glitch editor uses Prettier and not ESLint. If you need to change your Prettier config options, you need to create a .prettierc JSON file.

1 Like
3

Thank you, you are right, the button uses Prettier.

However, the VS Code plugin for some reason doesn’t respect .prettierrc.

4

There are other config files for Prettier other than a .prettierrc file:

  • A "prettier" key in your package.json file.
  • A .prettierrc file, written in JSON or YAML, with optional extensions: .json/.yaml/.yml (without extension takes precedence).
  • A .prettierrc.js or prettier.config.js file that exports an object.
  • A .prettierrc.toml file, written in TOML (the .toml extension is required ).
5

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

6

So it needs the Prettier plugin as dependency! Thank you!

EDIT: it worked for a moment, but now the formatting is back to being weird. It definitely is not the Prettier default.

EDIT: It’s good again. Maybe related to my NeoVim plugin? hmm.

1 Like