vscode hanging with some vue files

[gurgeous]

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

0.2.5

What version of Tailwind CSS are you using?

3.2.7

What version of Node.js are you using?

18.12.1

What package manager are you using?

yarn

What operating system are you using?

macOS

Describe your issue

We added prettier-plugin-tailwindcss a couple of days ago. It worked initially, but I noticed that vscode+prettier was hanging trying to save certain .vue files. The hangs were obvious because files would fail to save and vscode would complain that prettier was still running. This occurred even after restarting vscode, etc. I removed the package and vscode was able to save those files again.

Sorry about the vague bug report. We are not using any other prettier plugins. We love the idea and really want it for our project! Thanks for all your hard work.

[thecrypticace]

Does prettier hang when you run npx prettier -w . in your project?

[gurgeous]

I cannot get it to happen with prettier on the CLI. It's intermittent in vscode, but definitely present and unrecoverable. Here's the shortest file I could make that triggers it occasionally:

Something.vue:

<template>
  
  <div v-if="error" class="bg-error text-xs mt-1 bg-error-content py-1 px-2 inline-block rounded">
    {{ error }}
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const error = ref<string>();
</script>

$ code --list-extensions | rg "vue|prett"
esbenp.prettier-vscode
Vue.volar
Vue.vscode-typescript-vue-plugin

settings.json:

  "editor.formatOnSave": true,
  "[vue]": {
    "editor.codeActionsOnSave": { "source.organizeImports": true },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

.prettierrc:

{
  "printWidth": 100
}

[thecrypticace]

Are you by chance using the Tailwind CSS intellisense extension as well? I want to be sure I'm replicating the environment properly.

[gurgeous]

I am not using that. Anything else I should grep for? Thanks!!

[thecrypticace]

Nope, I don't think so. I'll see what I can figure out.

[thecrypticace]

@gurgeous So far I can't get the hang to happen. Any chance you could provide a project that you're able to reproduce it on? Also the full list of install extensions would be super helpful.

[gurgeous]

I can't share the project unfortunately. Maybe I can come up with a better repro. I'm also happy to pop open dev tools or mess around with vscode if you have any pointers. I've written some extensions too...

Here's the full list of installed extensions, apologies:

aki77.haml-lint alexcvzz.vscode-sqlite andersliu.insert-line-number astro-build.astro-vscode bierner.markdown-preview-github-styles BriteSnow.vscode-toggle-quotes bungcip.better-toml coolbear.systemd-unit-file cpylua.language-postcss csstools.postcss dbaeumer.vscode-eslint donjayamanne.githistory doublefint.pgsql earshinov.permute-lines EditorConfig.EditorConfig enkia.tokyo-night esbenp.prettier-vscode flesler.url-encode formulahendry.code-runner GitHub.copilot GitHub.vscode-pull-request-github golang.go Grumpydev.pico8vscodeeditor gurgeous.ruby-open-gem hogashi.crontab-syntax-highlight idleberg.applescript JuanBlanco.solidity kamikillerto.vscode-colorize karunamurti.haml Koihik.vscode-lua-format LoranKloeze.ruby-rubocop-revived mechatroner.rainbow-csv misogi.ruby-rubocop mrmlnc.vscode-duplicate ms-azuretools.vscode-docker ms-python.isort ms-python.python ms-python.vscode-pylance ms-vscode-remote.remote-ssh ms-vscode-remote.remote-ssh-edit ms-vscode.remote-explorer oderwat.indent-rainbow Orta.vscode-jest Prisma.prisma rebornix.ruby sgryjp.vscode-stable-sort Shopify.ruby-lsp skellock.just sldobri.gruvbox-5-stars sryze.uridecode stkb.rewrap stylelint.vscode-stylelint svelte.svelte-vscode syler.sass-indented tiehuis.zig Vue.volar Vue.vscode-typescript-vue-plugin william-voyek.vscode-nginx wingrunr21.vscode-ruby zkirkland.vscode-firstupper

[mohammadsyuhada]

Me too having the same issue on vscode. Had to removed this plugin to make saving vue file works again.

[gurgeous]

We've adopted a workaround for anyone interested:

1. Set pluginSearchDirs: false in .prettierrc. This fixes vscode.
2. Run prettier --plugin node_modules/prettier-plugin-tailwindcss from the CLI when you want to sort things.

We use just as our command runner and added a just sort to run the above. You could also use a pre-commit hook, etc.

Again, thanks for the great plugin! We love it (clearly) and I totally get that vscode/prettier are tough to debug. No worries and thanks for all your hard work.

[tjkohli]

For what it's worth, we're having the same issue with Next.js + TypeScript + TailwindCSS files. After spending over 4 hours trying to isolate the root cause, it was this plugin. Removing it solved the issue!

[ddahan]

After days on a similar issue where one my CPU was stuck at 100% usage, I can confirm this comes from this plugin!

I'm using Nuxt 3.41 and I'm formatting Vue files.
On a 100-line Vue file:

• Saving with Prettier only: 60 ms and no CPU issue
• Saving with Prettier + prettier-plugin-tailwind: 400 ms, and minutes later, CPU usage raises, then my VS Code is completely stuck, and I have to reboot it.

[richardtallent-erm]

Having the same problem on my team. Been trying to figure out the cause for days. Restarting Code makes everything run fine for awhile, then it starts either formatting Vue files very slowly (2-100 seconds apiece, and these are not massive components), or Prettier never finishes saving and we have to cancel the format to get it saved.

Happy to provide any debug info we can, but it doesn't seem to be related to the size of the component, but may be related to the number of files edited in the current session.

[tkat]

In vue-cli based projects, downgrading Tailwind to 3.2.x resolves the issue.

[matt-kinton]

Same problem for me, I downgraded the plugin to 0.2.3 and that seems to also have resolved the issue. Just chose that version at random so not sure at which version it starts happening.