VSCode eventually hangs after formatting files

[Doesntmeananything]

What version of prettier-plugin-tailwindcss are you using?

v0.3.0

What version of Tailwind CSS are you using?

v3.2.7

What version of Node.js are you using?

v18.15.0

What package manager are you using?

npm

What operating system are you using?

Linux 6.3.4-arch1-1

Reproduction URL

https://github.com/Doesntmeananything/prettier-plugin-tailwindcss-test

• Main branch has prettier-plugin-tailwindcss installed and activated.
• without-prettier-plugin-tailwindcss branch doesn't have the plugin installed for easier comparison.

Describe your issue

This is in continuation of the issue https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/144.

When using this plugin to format files, VSCode eventually hangs.

I've prepared a reproduction repo where I consistently get this issue during random text edits. Here's a recording of me encountering this problem in the reproduction repo:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/assets/34657799/efbc94fc-1dc8-42ed-8c8f-6d084e27be4f

A couple of notes:

• This is recorded on a freshly launched VSCode instance.
• In an NX monorepo with a basic Next.js project.
• Format on save is turned on.
• Compared to the branch without this plugin, I immediately start getting inconsistent timings on formatting (as seen in the output tab at the bottom): what is usually a <50 ms operation can become a ~500 ms to ~9000 ms operation.
• The first big dip occurs at 00:56, where formatting takes 8607 ms.
• Then a similar dip occurs at 1:42, where formatting takes 9408 ms.
• Finally, VSCode hangs indefinitely starting at 2:14 and the recording just plays out to the end.

The only thing that consistently helped me was to remove the plugin entirely. I tried disabling format on save and using manual formatting via Format document, but the issue was still there.

My specs are roughly:

• 64 GiB RAM
• i9-9900K × 16 CPU
• 1.0 TB SSD

Here's the list of my installed extensions:

Installed extensions

albert.TabOut andys8.jest-snippets bierner.color-info bierner.github-markdown-preview bierner.markdown-checkbox bierner.markdown-emoji bierner.markdown-footnotes bierner.markdown-mermaid bierner.markdown-preview-github-styles bierner.markdown-yaml-preamble bmuskalla.vscode-tldr bradlc.vscode-tailwindcss BriteSnow.vscode-toggle-quotes christian-kohler.npm-intellisense codezombiech.gitignore DavidAnson.vscode-markdownlint davidbwaters.macos-modern-theme dbaeumer.vscode-eslint dsznajder.es7-react-js-snippets eamodio.gitlens EditorConfig.EditorConfig esbenp.prettier-vscode firsttris.vscode-jest-runner formulahendry.auto-rename-tag GitHub.remotehub GitHub.vscode-pull-request-github GraphQL.vscode-graphql GraphQL.vscode-graphql-execution GraphQL.vscode-graphql-syntax humao.rest-client ipatalas.vscode-postfix-ts jakearl.search-editor-apply-changes jasonnutter.search-node-modules jock.svg meganrogge.template-string-converter mhutchie.git-graph miguelsolorio.fluent-icons mikestead.dotenv ms-azuretools.vscode-docker ms-vscode-remote.remote-containers ms-vscode-remote.remote-ssh ms-vscode-remote.remote-ssh-edit ms-vscode-remote.remote-wsl ms-vscode-remote.vscode-remote-extensionpack ms-vscode.azure-repos ms-vscode.cmake-tools ms-vscode.cpptools ms-vscode.remote-explorer ms-vscode.remote-repositories ms-vscode.remote-server nrwl.angular-console Orta.vscode-jest pflannery.vscode-versionlens polypus74.trusty-rusty-snippets pomdtr.excalidraw-editor Prisma.prisma qufiwefefwoyn.kanagawa redhat.vscode-commons redhat.vscode-yaml rust-lang.rust-analyzer serayuzgur.crates stylelint.vscode-stylelint tamasfe.even-better-toml tldraw-org.tldraw-vscode TobiasTimm.raiju twxs.cmake usernamehw.errorlens VisualStudioExptTeam.vscodeintellicode vscode-icons-team.vscode-icons wayou.vscode-todo-highlight yatki.vscode-surround yoavbls.pretty-ts-errors yzhang.markdown-all-in-one

[ivorafael]

+1

What version of prettier-plugin-tailwindcss are you using? v0.3.0

What version of Tailwind CSS are you using? v3.3.0

What version of Node.js are you using? v17.9.1

What package manager are you using? yarn

What operating system are you using? macOS Ventura 13.3.1

Installed extensions:

adam-bender.commit-message-editor
artdiniz.quitcontrol-vscode
bradlc.vscode-tailwindcss
christian-kohler.path-intellisense
dbaeumer.vscode-eslint
eamodio.gitlens
esbenp.prettier-vscode
gerane.Theme-Blackboard
luisfontes19.vscode-swissknife
PKief.material-icon-theme
styled-components.vscode-styled-components
VisualStudioExptTeam.intellicode-api-usage-examples
VisualStudioExptTeam.vscodeintellicode
wmaurer.change-case

[izhan]

To add another data point: we've been running into memory leak issues but not with the VSCode plugin. We use prettier.format directly (our product is for UI code-gen) and adding this plugin (v0.3.0) has been creating "JavaScript heap out of memory" errors. It's reproducible every time and removing the plugin fixes the issue.

I don't have a minimum repro yet, but will post more here if I get more info.

[thecrypticace]

@izhan if you can reproduce that it would be super beneficial! Also, can you open a separate issue for this?

We worked to reduce the memory usage with changes in v0.3.0 — especially as it relates to using plugins which, in my testing, resulted in pretty significant savings. So anything you can provide that reproduces those errors would be helpful. I ran into lots of them in >=v0.2.6 and worked to pare down memory usage as much as possible.

[thecrypticace]

So, an update, we've been able to reproduce the eventual hang! It looks to be a problem with the VS Code extension host and the way it's interacting with some code in the plugin causing stack trace prep to overflow the stack (ironic right? lol).

The technical details are a bit complex but essentially with the VSCode prettier plugin all the plugins are loaded into the same "JS context" as the extension host process. And some code there is wrapping custom Error.prepareStackTrace functions — even when you restore it back to the original. Error stack traces end up being used for lots of things — like finding call sites to a function. So this problem gets compounded over time, for example every time prettier runs and this explains why you see it gets worse and worse and worse until the extension host freezes. This also explains why it's not visible in the CLI. Because it's an interaction issue between the two.

I've not yet opened an issue/PR with VS Code as I'm still working out some details but hope to do so in the next couple of days.

In the short term just restarting the extension host should fix the problem — that way you don't necessarily have to completely restart VSCode to work around it.

[xhyrom]

I can reproduce when I use tailwind still with the @tailwindcss/typography module, VSCode then goes horribly slow.

https://github.com/xHyroM/website - try opening it, after a few minutes of saving, all the actions in VSCode will take you an awfully long time - creating files, renaming, saving...

[thecrypticace]

I've opened an issue (and an accompanying PR containing a possible fix) with VS Code: https://github.com/microsoft/vscode/issues/184926

Hopefully we can get in some kind of fix for this soon. I'll leave this issue open until such a time that the issue in VS Code itself is resolved.

[RyelBanfield]

It took me so long to trace the hanging to this plugin.

Some people are downgrading vscode to 1.76 which does seem to help.

[blaketyro]

Confirming this happens in v0.3.0.

I've been trying to track down this issue for ages, messing with eslint/prettier/extension settings to no avail. But yesterday, and confirmed again today, I uninstalled prettier-plugin-tailwindcss and no more slow saves! (Though it seemed to need a vscode reload to register.)

[thecrypticace]

The fix for this issue is currently available in the insiders build of VS Code. I've done some testing (as has at least one other person) and it appears that it is indeed fixed. So the fix should be included in v1.80 of VS Code.

[RyelBanfield]

I hope so! Would like to stop needing to restart the extension every 2 mins.

[iamandrewluca]

I'm using git hooks to run prettier on code. And I've disabled the plugin in development mode and activated only when committing.

https://github.com/iamandrewluca/iamandrewluca.github.io/commit/22df1df6cf3b72d63425de898713b8e650c7c2cd

[xhyrom]

I'm using git hooks to run prettier on code. And I've disabled the plugin in development mode and activated only when committing.

iamandrewluca/iamandrewluca.github.io@22df1df

This is also good temporary solution but it was fixed already so just install vscode insiders 👍

[NFodrea]

a coworker was running into some similar issues Prettier cannot save file with extended prettier-plugin-tailwindcss plugin I'm guessing the issue is related to this prettier issue

This was his fix: in prettierrc.js remove the require function wrapping the plugin name plugins: ["prettier-plugin-tailwindcss"],

instead of plugins: [require("prettier-plugin-tailwindcss")],

From the Not formatting on 9.15.0 when using plugin thread here is a second option: downgrade prettier

[ghost]

1.80.0 is now officially released.

[Doesntmeananything]

I have updated to VSCode 1.80.0 and can no longer reproduce the issue. Everything works great!

Huge thanks to @thecrypticace for not only investigating the root cause but making a contribution to VSCode itself to fix the problem. Absolutely fantastic job.

Seeing that 1.80.0 contains the fix and is now available to everyone, I'm closing the issue.

[thecrypticace]

@Doesntmeananything you beat me to it — was just getting ready to close this issue! 😂

I've done testing on v1.80 myself and this issue is indeed resolved. Thanks everyone for your patience with this! ✨