Buggy when using VSCode

[cstrnt]

Hi there,

i started using your config globally with vscode. I noticed that I need to press cmd + s twice so that prettier & eslint-rules are applied.

You can see it here:

I have the issue on my MacBook as well as my Windows laptop.

[wesbos]

I have this too - I don't know what causes it..

[wesbos]

this is apparently by design (???)

https://twitter.com/barneycarroll/status/1105486483006332928

Prettier is iterative, changes will often introduce new mistakes which then need changing etc. The only way to completely prettify a thing is to continuously save until the file stops changing.

That seems odd but apparently is correct..

[vjeux]

Prettier tries extremely hard to be stable. There are some cases where you need to format twice but it’s the exception.

In the gif, it doesn’t look like the changes have anything to do with prettier. In the first format var is changed to let and a ; is added in a different line. In the second save, let is renamed in const and the semi colon is put back on the right place.

Maybe there’s a lint rule that changes var to let and another one that changes let to const. Prettier doesn’t do that.

For the semi colon, prettier wouldn’t add it on its own line. So must be some lint rule that’s not written properly.

[wesbos]

thanks @vjeux - I bet it's a conflict between Eslint and prettier. Gonna reopen to see if anyone has other ideas

[silvenon]

Yep, there are two separate issues going on. @vjeux covered the one with var/let/const, the second one with the semicolon on a newline happens because of the combination of import/newline-after-import and Prettier. I don't know if it's possible to rework that rule to play nicer with Prettier.

[silvenon]

By the way, there is no conflict here, as long these tools (eventually) create code that works for both of them. Sometimes you'll just need to save multiple times. E.g. the rule for const can't know that some let should be const until there is a let to begin with, which is created from var by another rule. 😵

[silvenon]

Also probably related: Microsoft/vscode-eslint#154

[vjeux]

the combination of import/newline-after-import and Prettier

The only combination I can come up with here is that:

• There's no ;
• Prettier adds a ; at the end
• import/newline-after-import uses the version of the world before the ; was added and adds a newline after require('express'). So before the ;. And it looks bad.
• We save again and prettier puts it back where it should be.

The problem seems (if my guess is correct) to lie in the code that wires up eslint and prettier together.

[vjeux]

the rule for const can't know that some let should be const until there is a let to begin with, which is created from var by another rule.

The straightforward solution would be for the two rules to be merged together. The var -> let rule could be aware that we want to use const when necessary and do var -> const when needed.

[mariosanchez]

In my case it was toggling from single to double quotes and adding/removing the last comma of my array items, I had to put this config in my VSCode settings in order to disable the prettier extension for js files (and jsx in my case):

"prettier.disableLanguages": ["javascript", "javascriptreact"]

In the readme it says "prettier.disableLanguages": ["js"] and that didn't work for me.

Maybe it might help?

[wesbos]

@mariosanchez - that is a different issue but i will update the docs for this!