FormatOnSave takes a long time

[tjayrush]

Summary

Frequently, when I save a file with FormatOnSave option on, it takes forever to finish saving. I have to quit VS Code and restart. Then, save happens instantaneously again. After a while, the issue re-appears. The identical issue to this one: #1253. Not at all clear why that issue is closed -- clearly people are having this problem.

Github Repository to Reproduce Issue

#1253

Steps To Reproduce:

#1253

Expected result

Doesn't take a long time to save.

Actual result

Took forever to save.

Additional information

Obviously, many people are having this same problem. This issue (#1253) should not be closed.

VS Code Version:

Prettier Extension Version:

OS and version:

Prettier Log Output

LOG GOES HERE. DO NOT USE A SCREESHOT, COPY AND PASTE THE TEXT

[dzintars]

Same there. Not sure what exactly causes that... but in my case it happens when i:

1. First modify an SVG XML inside of tagged template literals like:

export const ChevronRight = (): SVGTemplateResult => svg'
    <svg id="i-chevron-right" viewBox="0 0 32 32">
        <path d="M12 30 L24 16 12 2" />
    </svg>
'

2. And then trying to save some other file.ts typescript file which imports that SVG object.

Prettier hangs up exactly when saving file.ts.

If i press Cancel then i get this on next save:

Only Reload Window helps, but it's annoying as hell as i should start dev server all the time.
I tried to use (enable/disable/uninstall) several tagged template literal plugins - the result is same. Prettier always gets on my way.

More over - i have no any hints (which plugin or other info) from Prettier itself, how could i debug that.

[ntotten]

The issue you referenced was closed because I can’t reproduce the bug. If someone can provide a valid repro I’m happy to try to fix it, but that bug nor this one has enough info. This extension has millions of monthly users. Clearly not everyone is having this issue. Please provide repro step and I’ll investigate.

[supercede]

This same issue happens when I try to save .md files on VSCode sometimes. But when I cancel and resave the file, it works.

[robertjbass]

I'm having the same issue as well and have been for a while now. It's a private repo with an NDA type of situation so I can't really share that. I don't know what this could be.

[carscx]

Same Issue here

[robertjbass]

I was never able to solve this issue and I spent countless hours debugging it over the course of two very frustrating months that it was happening. I eventually realized that I was wasting an absurd amount of time on this one problem and I uninstalled every version of VS Code that I had on my computer. I deleted all the temporary files, cleared the caches, started with a fresh install and reinstalled all of my extensions once again.

When I tried to back everything up before taking the nuclear option, the problem just persisted so I realize I had to wipe everything out if I was going to truly fix this.

Once I started reinstalling extensions, it became apparent that I have really customized my editor to my liking over the past several months and I thought that I would be able to remember all of the settings that I was using but I couldn't even come close. I ended up having to play with a lot of settings and extensions to get everything to feel normal for me again since I work largely with VueJS.

Now I don't have the issue anymore but I was never able to get to the bottom of it and I tried hard.

It's the worst kind of bug because you don't get any logs to reference regarding what's happening behind the scenes, other people can't reproduce it because I think it has something to do with your settings (ESLint, Prettier, Vetur, etc...)

Save yourself the headache and just make note of the important settings. Go for a fresh install and try to make sure that you don't have too many things which could effect formatting.

That's the best solution I could find even after consulting associates and friends for help. Everyone was stumped.

[carscx]

I agree with @716green , but the truth is that I have done a clean installation and it continues to happen, with only the Prettier extension.

[lsl]

@ntotten I'm able to mostly consistently repro this,

1. git clone https://github.com/Automattic/wp-calypso.git
2. Open the repo with vscode and prettier (or eslint plugin as we use the prettier eslint plugin).
3. Open this file
4. Add a couple of newlines and save to confirm format on save is working as expected
5. Delete this fragment close line, you may need to add some tabs/line blanks to trigger it.
6. Saving, you should see eslint give you 70 odd errors
7. Add the fragment close back
8. Save again, you should find that the preceding errors were not cleared and the format will no longer run, instead it "hangs" and uses 100% cpu (well on one thread anyway)

I'm not sure where the failure is really happening, probably on the first save after line delete and then isn't recovering on the second.

This problem happens both with the prettier plugin or the eslint vscode plugin (because we use the prettier plugin for eslint.)

The only way I've found to recover from this state is to sigterm the electron thread at 100% load or to restart vscode (at which point, with the replaced fragment close, will continue to format correctly)

I suspect this is hard to repro because it probably has more to do with the large number of cascading errors that stems from removing one fragment closure line than removal of the line itself. You probably also need a significantly complicated enough file to trigger the failure mode.

[talon-himself]

I have been seeing this over the past couple of days. It has been very frequent and happens even for files that have had a 1 line change.

[michaelybecker]

seeing it as well. for filesizes as small as 66 lines, probably less too.

[ntotten]

@lsl Thanks for the repo, i will investigate when time allows.

[miller-productions]

Seeing this issue also.

I observe a few minutes of waiting...

[juaneme8]

Same issue here.

[stefanstaynimble]

Same issue here

[dikaio]

☝️

[Sebastian-Zoske]

Had the same problem and solved it by cleaning up my settings.json

[bitsmakerde]

Same issue here

[tatd3v]

same issue

[blzzz]

same here

[pixelprogrammer]

I experienced this last week on a Typescript React project, however, I also got this problem while working on a Go project just now. Code action on Save took a while and failed to auto format and auto import packages. This is probably an issue with VS Code itself and not the VS Code prettier plugin.

I was working in a Workspace with multiple folder paths (3). 2 of which were Go projects and the third being a general data folder which has one html file in it. My workspaces are pretty much Go files though.

[kaanrkaraman]

Same.

[pinsara-aasith]

same

[hhashoww]

same

[mgutz]

I'm experiencing this now. I spent about an hour diagnosing it. The issue, in my project, seems related to running typescript w/ nextjs. Perhaps open files, file locks. Not sure.

To reproduce the issue, I ran yarn next to start nextjs project in dev mode; browse a page; and then edit/save the page. The lengthy save dialog happens after a few tries. The dialog remains open for about 45 seconds. I noticed that tsconfig.json didn't exclude .next folder which is where nextjs caches files. Once that folder was excluded from typescript's config and after restarting VSCode and nextjs, saving files is under 100ms again. Keeping my finger crossed.

To be clear, this is what I changed

// tsconfig.json
{
  "compilerOptions": { ... },
  // edited this
  "exclude": ["node_modules", ".next"]
}

Update: The steps above provided temporarily relief. Increasing system parameters seems to be a better win. I'm on Linux.

Configuring Linux for Many Watch Folders

[pixelprogrammer]

@mgutz I think this might have to do something with having large files open in VSCODE. Whenever I open a compiled version of main js file from Webpack I start to have these issues and its been pretty consistent to the point where I now start to look for the large file that is open a tab somewhere.

[bleckcat]

I uninstalled live share, and typescript autoimports and it came back to normal.

[EdwardOmondi]

For me, it was co-pilot causing it to slow down. I removed it and now its working

[udondan]

I have not verified this yet (by uninstalling) but I am pretty sure this started happening for me when I installed the ESLint extension.

[alexmarginean16]

Same issue here! I had this before, than it magically got fixed, now I updated my VS code and the issue is back. I'm not sure why this is happening.

Edit: In this case it got fixed with another restart of VS Code, commented to soon

[cartini-dominic]

I've had same problem. and fixed it. my case was VSCODE "ESLINT" Plugin..

[udondan]

There clearly is a problem with the combination but uninstalling one hardly is a fix.

Since this is, according to this issue, happening with several other plugins too, I would assume the problem is with prettier and I hope this will be addressed.

[qaharmdz]

Get a similar issue with jsx and Prettier. Reading the comments, I get the impression that the issue might happen when trying to format incomplete/unrecognized code structures.

Changing both the autoSave and editor.format settings solved it for me.

// Before
  "files.autoSave": "onFocusChange",
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,

// After
  "files.autoSave": "off",
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,

[movitsky]

I ran into this issue today and after reading this thread and trying a few combinations, it looks like in my case it was being caused by some sort of interference from the colorize plugin. With colorize installed, it was taking nearly 3.5 minutes to save any file (including, annoyingly, vscode settings files). Without, saving is now immediate.

I agree with @udondan, this appears to be an issue with Prettier that is triggered by some sort of conflict with certain onSave behaviors of other plugins.

[JudyTrillz]

Honestly, I could not find the issue with mine at the time of my complaint. I ended up formatting my entire pc. Thank God I had a backup running. I am currently using the same extensions I used then, but the format fixed the error on the spot. It was like a literal head shot to the problem.

…

On Mon, Apr 15, 2024 at 9:53 PM movitsky ***@***.***> wrote: I ran into this issue today and after reading this thread and trying a few combinations, it looks like in my case it was being caused by some sort of interference from the colorize plugin. With colorize installed, it was taking nearly 3.5 minutes to save any file (including, annoyingly, vscode settings files). Without, saving is now immediate. I agree with @udondan <https://github.com/udondan>, this appears to be an issue with Prettier that is triggered by some sort of conflict with certain onSave behaviors of other plugins. — Reply to this email directly, view it on GitHub <#1333 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXFYUOFEX2CVZUJ2Y2737UDY5Q44HAVCNFSM4MJTBD32U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBVG43TQNZVHA3Q> . You are receiving this because you commented.Message ID: ***@***.***>

[psycho-baller]

Switched to Biome because of this issue for months. Never been happier.

Same, been using Biome for a few days and haven't faced a single issue. Prettier and ESlint plugins were slowing down my MACBOOK PRO M1 MAX and freezing vscode🤦‍♂️

[intellix]

I have the following config which allows me to fix imports when saving files. I have comments which explain what each one does:

"editor.formatOnSave": false,
"editor.codeActionsOnSave": [
  "source.organizeImports", // Delete unused imports
  "source.formatDocument", // Prettier
  "source.fixAll.eslint" // Fix eslint issues
],

Generally it works really fast on an individual file basis. My problem is when doing a mass find/replace if I'm moving files between libraries, at which point I'll get a pile of "Format of Save" waits.

For me the fix is to basically empty codeActionsOnSave before running a big find/replace and then run prettier/eslint manually project-wide, which is much faster.

I think one thing that would help here, especially when debugging is to be able to see which code action is problematic and struggling. I assume from all the biome comments that it's either prettier or eslint which get clogged up.

[garcipat]

For me the fix is to basically empty codeActionsOnSave before running a big find/replace and then run prettier/eslint manually project-wide, which is much faster.

Thats not a fix but a workaround. Longterm thats not good.

But in general this seem to be an issue with vscode not prettiern general then? If i see that everyone has issues but a pretty different setup but the same symthoms.

[kwiat1990]

For me the fix is to basically empty codeActionsOnSave before running a big find/replace and then run prettier/eslint manually project-wide, which is much faster.

Thats not a fix but a workaround. Longterm thats not good.

But in general this seem to be an issue with vscode not prettiern general then? If i see that everyone has issues but a pretty different setup but the same symthoms.

If Biom can make it work then I would rather say that Prettier extension is somehow broken. I don’t know if this issue is even recognized by the development team of Prettier, so it is not the best situation if someone wants or must use it in a project. It has been a big disappointment for me personally for months now and this thread is years old.

[ShahramShakiba]

If you use "Prettier ESLint" try to disable it and only use "Prettier - Code formatter". This is how I fix mine

[jonaskello]

I had this problem with prettier on and off. Then some time ago I switched to biomejs and it worked for a while but now biome does the same thing, it hangs and the file cannot be saved. I can restart vscode and it works for a while and then the problem comes back. Since this happens in both prettier and biome my current take is that something in vscode is causing this, not in the extensions. The below dialog just keeps running forever:

[adampwright]

Just switched to Biome which fixed the problem. Will report back and confirm/deny on @jonaskello's observation.

[toomuchdesign]

Running into this issue again and again. Here are a few things I've noticed:

• The issue seems not to be related to formatOnSave but to vscode's code formatting more in general. I can reproduce the issue by just running vscode "Format document"
• The issue seems to happen only when editing TS modules depending on very complex TS types
• Once the formatting is stuck, it remain stuck on any file and a vscode restart is required in order to restore operativity
• I can reproduce the issue without Eslint or Biome plugins
• This time disabling Pretty TypeScript Errors plugin fixed the issue, a month ago it worked by disabling Eslint plugin

[adampwright]

I had this problem with prettier on and off. Then some time ago I switched to biomejs and it worked for a while but now biome does the same thing, it hangs and the file cannot be saved. I can restart vscode and it works for a while and then the problem comes back. Since this happens in both prettier and biome my current take is that something in vscode is causing this, not in the extensions. The below dialog just keeps running forever:

Can confirm this. Biome is a lot better and makes you wait to save a lot less frequently, but it still crops up often. It was perfect for a couple of days. Also @toomuchdesign, disabling/uninstalling that same addon also fixed it for a short time for me too. But now it's back.

This is obviously a deeper issue.

[f1shy-dev]

I have similiar behaviour, it almost "comes back" after a while...

[giangth94]

I tried the suggested approaches but couldn't get rid of the issue, I think it might have no exact cause (no right answer for all of us).

Think of the recent changes on your machine, I uninstalled rbenv (ruby version manager), and somehow it also removed prettier gem (required to format my ruby code). My format on save setting was on, when I saved the code, Vscode looked for another formatter, which caused it to take longer to load.

I resolved the issue by re-installing the prettier gem.

[zdzirin]

I work on both Svelte and Next projects.

I was working on a NextJS project and Prettier was taking a long time (~8000ms, or 8 seconds)

I disabled all my Svelte extensions, and now it takes 20ms.

This has seemingly solved the issue for me as well!

[MimikFc7]

Same issue here

[blue-bell]

same

[dpecha777]

same issue here

[dpecha777]

same issue here

i resolved it by removing one extension from vs code in my case some version of GPT chat -> it was eating my RAMs and completely froze every other extension :D

[Anirudh-rb26]

I found a solution that works for me after MONTHS!

Uninstalled this bad boy and it fixed the issue for me. Hope it works for you guys too.

Thank you soo much, been struggling with this for months now and this fixed it for me!!

[Xerios]

Not sure if this helps anyone, but for me the slowness was triggered by "editor.formatOnSaveMode" setting.

I was noticing some slowness and after checking the output logs, it turned out that prettier was running 36+ times on every save (I only use formatOnSave), even for a single whitespace character change. Manual formatting through command palette didn't cause this issue. So after making sure this wasn't caused by my other extensions, I've eventually tracked it down to small change that fixed all my problems.

It seems like modificationsIfAvailable doesn't play nicely with prettier

 "editor.formatOnSaveMode": "modificationsIfAvailable",

Changing it to "file", prettier now only runs once for each save and things really fast and snappy.

 "editor.formatOnSaveMode": "file",

[garcipat]

Not sure if this helps anyone, but for me the slowness was triggered by "editor.formatOnSaveMode" setting.

I was noticing some slowness and after checking the output logs, it turned out that prettier was running 36+ times on every save (I only use formatOnSave), even for a single whitespace character change. Manual formatting through command palette didn't cause this issue. So after making sure this wasn't caused by my other extensions, I've eventually tracked it down to small change that fixed all my problems.

It seems like modificationsIfAvailable doesn't play nicely with prettier

 "editor.formatOnSaveMode": "modificationsIfAvailable",

Changing it to "file", prettier now only runs once for each save and things really fast and snappy.

 "editor.formatOnSaveMode": "file",

this seem to be the first reasonable proposal since it seem to tacke the problem at the root.
Uninstalling things or switch tooling does not seem to really solve the issue. This does.
I will definetly try this.