prettier-plugin-tailwindcss: VSCode eventually hangs after formatting files
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
Mainbranch hasprettier-plugin-tailwindcssinstalled 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:
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 saveis 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 takes8607 ms. - Then a similar dip occurs at
1:42, where formatting takes9408 ms. - Finally, VSCode hangs indefinitely starting at
2:14and 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
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 17
- Comments: 16 (5 by maintainers)
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.
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.prepareStackTracefunctions — 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.
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.jsremove the require function wrapping the plugin nameplugins: ["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
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.
@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! ✨
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.
1.80.0 is now officially released.
This is also good temporary solution but it was fixed already so just install vscode insiders 👍
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
I can reproduce when I use tailwind still with the
@tailwindcss/typographymodule, 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…
To add another data point: we’ve been running into memory leak issues but not with the VSCode plugin. We use
prettier.formatdirectly (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.
+1
What version of
prettier-plugin-tailwindcssare you using? v0.3.0What 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