Prettier stops formatting my code

[Chiamaka]

Hey, guys. Awesome work with Prettier, I love it.

Recently, I started noticing that prettier doesn't format my code. It doesn't always start out this way though. It starts out fine but after a while (I notice vscode takes about 2 seconds to save my file), it stops until I restart my editor.

Has anyone encountered this? Anyone know the issue? Thanks

[CiGit]

I've not encountered such issue. What do you mean by 'after a while' ? after some time doing nothing ? after some time saving a lot? Does it happen with prettier being the only enabled extension ?

And just to be sure, does it stop or does it take time formatting?

[Chiamaka]

'After a while' means after some time saving alot. I have other extensions installed/enabled. And yeah, it just stops formatting. What takes time is vscode when I hit save. I was thinking maybe there is a correlation between the two events (vscode taking about 2 seconds to save my code and when prettier stop formatting my code).

[CiGit]

A correlation seems right. It this happens again, it seems it should, can you see if developer tool says something ? Snapshot memory, CPU profile would also certainly help in that case :sob:

[kv4sha]

If file saving completes before than "prettier" completes working, file doesn't format. You can see it especially often when you work with large files or on a slow computer.

[RobinMalfait]

Interesting, I wonder if this is a problem with vscode itself since we are just providing a formatter using their api. 🤔

[CiGit]

Introduced a delay to test this:

return format(document.getText(), document, {})
            .then(
                code =>
                    new Promise<string>(r => setTimeout(() => r(code), 1000)) // delay
            )
            .then(code => [
                TextEdit.replace(fullDocumentRange(document), code),
            ]);

Seems it formats when calling the formatter command. But it is completely discarded on save. Seems to be about 1 second. Will need a lot more digging

EDIT: this is on my next branch, it's already returning a promise ;-)

[CiGit]

I don't think this last problem is exactly what @Chiamaka encountered. I may be wrong, but if it takes time to save, it should let us more time to return from format call. Or do we take more time after a while ? Those hard to debug things ...

[CiGit]

And thinking about it right now, I suppose this is a problem with vscode. Something like (This is a try to make a sequence diagram)

vscode	prettier
call format	start format
save buffer to disk	process format
buffer saved	process format
	update buffer
don't care, buffer already dropped

[kv4sha]

May be better to use onWillSaveTextDocument https://code.visualstudio.com/docs/extensionAPI/vscode-api#_workspace

[CiGit]

This may be a work around. Even if from the doc you linked

The current thresholds are 1.5 seconds

It seems to be near 1 sec in this case.

It will also change a good part of our code AND users won't be able to use format document anymore. We will need a new actions and mostly some new settings ....

[kv4sha]

Maybe it help, this plugin wrote in Microsoft. https://github.com/Microsoft/vscode-go/blob/master/src/goFormat.ts

[HelveticaScenario]

I have been experiencing this as well. Ive noticed that when it happens there is a process in the activity manager called Code Helper that is taking up a significant percentage of cpu. Im on a MacBook Pro (Retina, Mid 2012) with 2.6ghz i7 and 8gb ram. I was experiencing this on 1.14

[willadamskeane]

I also have this problem. I have to restart Visual Code to get it working again.

[Nimelrian]

Question to everyone experiencing this bug: What is your printWidth configuration set to? I experience the same issue when Prettier encounters long lines (mainly React elements with many props) with a printWidth of 200. It doesn't happen all the time, but these kind of files seem to be the culprit from what I could gather of my own experience with this bug.

I experimented with reducing the printWidth setting to 100 and the problems disappeared.

Can somebody else verify that this fixes the issue for them?

Edit: Ok, this didn't solve the issue. If I create a really long one-liner it still breaks. Will investigate further, but it definitely happens when there are long lines in play.

[Nimelrian]

Some more testing yielded a pretty good way to reproduce the problem which may help finding the cause for this issue.

1. Create the following file test.jsx inside an empty folder, open it in VS Code:

   const ThisKillsThePrettier = () => (
   <div>
   <img
     anotherProp="LongValueLongValueLongValueLongValueLongValue"
     src="TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest"
     className="AnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTest"
     id="LongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTest"
   />
   <img
     anotherProp="LongValueLongValueLongValueLongValueLongValue"
     src="TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest"
     className="AnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTest"
     id="LongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTest"
   />
   <img
     anotherProp="LongValueLongValueLongValueLongValueLongValue"
     src="TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest"
     className="AnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTest"
     id="LongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTest"
   />
   </div>
   );

2. Then, remove all the linebreaks between the props so that it looks like this (End -> Ctrl+Del -> Space helps with this):

   const ThisKillsThePrettier = () => (
   <div>
   <img anotherProp="LongValueLongValueLongValueLongValueLongValue" src="TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest" className="AnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTest" id="LongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTest" />
   <img anotherProp="LongValueLongValueLongValueLongValueLongValue" src="TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest" className="AnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTest" id="LongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTest" />
   <img anotherProp="LongValueLongValueLongValueLongValueLongValue" src="TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest" className="AnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTestAnotherTest" id="LongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTestLongerTest" />
   </div>
   );

3. Save the file

4. The file should be saved after ~1-2 seconds, without being reformatted (still looks like step 2, rather than step 1).

5. In the meantime, Prettier finishes the formatting after ~2-3 additional seconds. Note that this is a very long time for such a short file. When it occurs in my production code, it does not finish in a reasonable amount of time, causing the CPU hogging.

6. Save the file again

7. The file is now formatted correctly.

8. Repeat step 2

9. Run the "Format Document" task, it will take a long time to finish

10. Save the file

11. The file is saved instantly in it's correct format

Running standalone Prettier on the file finishes in 67ms, so the dramatic slowdown does indeed seem to come from the plugin, rather than from Prettier itself

[braposo]

I'm getting a similar delay with "prettier.eslintIntegration": true, in the settings, but it seems to work fine if eslint integration is disabled.

What I also notice is that doing the format on save takes some time and the file isn't saved correctly, but triggering the formatting manually seems to be a bit faster, although not as fast as when eslint integration is disabled.

Do you also have eslint integration enabled?

[CiGit]

This may be relevant to this issue : prettier/prettier#3263 (just fixed not yet released)

@Nimelrian Quickly testing your reproduction steps leads to a really fast formatting in my case...

Running standalone Prettier on the file finishes in 67ms, so the dramatic slowdown does indeed seem to come from the plugin, rather than from Prettier itself

This seems weird to me. We do things prettier don't. mostly reading your file system tree upwards (is that slow?). But prettier is cached after first use (Node require). We don't have the cost of a node start + prettier load. (echo "" | prettier is ~200ms on my system)

I would expect both to be at the same speed. Of course there is vscode and other extensions which may do other things. To compare, quickly profiling vscode when calling Format takes around 20ms on a 200 loc tsx file. (DOM update excluded, cold ~160ms)

[Badbreaddead]

Any updates according to this issue?

[kv4sha]

If eslint-integration is on, auto format on save drops down with timeout. Without eslint-integration everything is OK.

[CiGit]

It seems VSCode discards formatOnSave if it takes more than ~1 sec. The solution I see for now is calling Format Document action explicitly. Or disable eslintIntegration which does a lot more work (prettier -> eslint --fix). It can still timeout with only prettier on some big files tho.

[anthonybrown]

I'm starting to use vscode and liking it so far except for the fact that vscode doesn't format my code when I use the keyboard shortcut, so I set up the editor.formatOnSave: true and that's not working as well??? 🤓

[CiGit]

I don't know your kb shortcuts, but if you open command palette and search for Format Document it should do something 😄

[anthonybrown]

@CiGit , it didn't do anything? Do I need a pragma or something? This is my .prettierrc file:

{
  "noSemi": false,
  "parser": "babylon",
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "all",
  "jsxBracketSameLine": false
}

[anthonybrown]

It should be putting in the semi-colons for me right?

class BookList extends Component {
  renderList() {
    return this.props.books.map((book) => {
      return (
    <li
      key={book.title}
      className='list-group-item'
      onClick={() => this.props.selectBook(book)}
        >
      {book.title}
    </li>
     )
  })
}

[CiGit]

@anthonybrown try with "semi": true you should have an error message in the output panel by the way.

@RobinMalfait We should maybe see to do something with the new notification center :-)

[anthonybrown]

Nothing ☹️ This is weird, I have it working in Vim just fine and Atom editor works too.

[CiGit]

Right, this is a warning, it appears only in dev console. if you remove your prettierrc, does it work?

[CiGit]

As of VSCode 1.22 you can now specify formatOnSave's timeout: https://code.visualstudio.com/updates/v1_22#_configurable-format-on-save-timeout

[fbacker]

@CiGit that was a good fix for now "editor.formatOnSaveTimeout": 3000,

[harleyguru]

Hey @CiGit , I think this is the issue related with Prettier itself. Even if I try to format explicitly without saving, it's not working. any idea?

Prettier only works when I had to restart VSCode for some mins only.

[HarisHashim]

I am having the same problem. Coding using VSCode and Vue. So Vetur is the formatter.

Afterabout 5 to 10 minutes of heavy editing. I notice that code hint (CTRL-SPACE) will just display loading and code formating (ALT-SHIFT-F) will not do formatting.

I have to restart VSCode and then terminate it in Task Manager. So looks like VSCode it self has become zombie.

[Talhah]

I am experiencing the exact same issue.

[aeslinger0]

I don't use Prettier and I still experienced this. It might be related to another extension. How many of you are using the Zignd.html-css-class-completion extension? Try disabling it

See https://github.com/Microsoft/vscode/issues/16328

[raulfdm]

It seems VSCode discards formatOnSave if it takes more than ~1 sec. The solution I see for now is calling Format Document action explicitly. Or disable eslintIntegration which does a lot more work (prettier -> eslint --fix). It can still timeout with only prettier on some big files tho.

Just want to say disable this integration solve my prettier~performance issue. Thanks @CiGit

[raulfdm]

I don't use Prettier and I still experienced this. It might be related to another extension. How many of you are using the Zignd.html-css-class-completion extension? Try disabling it

See microsoft/vscode#16328

@aeslinger0 I'm using this extension.

I've tried to disable and didn't solve the issue. Only when I disable the integration with Eslint solves.

[schester44]

I'm experiencing this same issue as well.

VS Code stops formatting my code, calling 'Format Code' doesn't work, and VS Code takes 2+ seconds to save. My fans start running as well.

[harleyguru]

make sure to disable or uninstall beautify extension. When it's enabled, prettier didn't work.

[timsully]

@harleyguru I had Beautify and Prettier installed at the same time and did what you recommended and Prettier is still unformatting the code once I save my file. Help anyone? Would be much appreciated! @CiGit

[harleyguru]

@timsully have you increased timeout as mentioned here? https://github.com/prettier/prettier-vscode/issues/181#issuecomment-379540988

uninstall Beautify and other formatter extensions you might have installed and restart VS code. It should work.

[timsully]

@harleyguru My timeout is set to "editor.formatOnSaveTimeout": 3000 issue still occurs unfortunately.

[timsully]

@harleyguru Identified other code formatters in my plugins and it works! :D Thanks everyone!

[harleyguru]

lol, @timsully This is not the issue of prettier itself actually. This is the conflict with other plugins. Happy I could help you!

[ntotten]

This issue appears to be resolved as such I am closing it. If you are still having problems please feel free to reopen.

[jayarjo]

These are the only extension I have, so no additional formatters and still it happens for me:

Although I should say it happens for some files only, mainly those that weren't prettified yet (at least by me) and are especially messy.

[kiranjd]

I'm facing a similar issue in JS files.

When I save a document, the loading indicator from prettier shows up as as Saving your document and it loads for indefinite time. Restarting VS Code doesn't solve it as well.

[ahayes91]

I'm facing a similar issue in JS files.

When I save a document, the loading indicator from prettier shows up as as Saving your document and it loads for indefinite time. Restarting VS Code doesn't solve it as well.

Seeing this myself today - wasn't seeing it yesterday

[effinrich]

I'm facing a similar issue in JS files. When I save a document, the loading indicator from prettier shows up as as Saving your document and it loads for indefinite time. Restarting VS Code doesn't solve it as well.

Seeing this myself today - wasn't seeing it yesterday

Yep, I'm also having this issue as of today. JSX, JS, nothing getting formatted on save or any other way.

[iljapanic]

I'm having the same issues, I suspect it might have something to do with the latest VS Code update.

I haven't had any issues with the identical setup until today when I updated the VS Code.

[ntotten]

If you are having issues that seem similar to this, please open a new bug. Commenting on this one does not provide me with any info I can use to debug this. See: https://github.com/prettier/prettier-vscode/wiki/Writing-a-Good-Issue