tailwindlabs / prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
MIT License
5.68k stars 134 forks source link

prettier-plugin-tailwindcss doesn't work with vscode #113

Closed kuerme closed 1 year ago

kuerme commented 1 year ago

prettier-plugin-tailwindcs: v0.2.1 Tailwind CSS: v3.2.4 Node.js: v18.12.1 Package Manager: pnpm v7.21.0 Operating System: Windows 11

Describe your issue prettier-plugin-tailwindcss doesn't work with vscode and it's plugin Svelte for VS Code and Prettier - Code formatter; it won't format the *.svelte files (but it formats the html files);

And with the svelte files, the "prettier" has taken effect, cause the prettier-plugin-organize-imports and prettier-plugin-css-order works fine,except prettier-plugin-tailwindcss...,so i think Is there anything that prevents tailwind formatting?...

here is my .prettierrc

{
    "plugins": ["prettier-plugin-svelte", "prettier-plugin-organize-imports", "prettier-plugin-css-order", "prettier-plugin-tailwindcss"],
    "pluginSearchDirs": false,
    "svelteSortOrder": "options-scripts-markup-styles",
    "svelteStrictMode": false,
    "svelteAllowShorthand": false,
    "svelteIndentScriptAndStyle": true,
    "organizeImportsSkipDestructiveCodeActions": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 4,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "bracketSameLine": true,
    "endOfLine": "lf",
    "quoteProps": "as-needed",
    "arrowParens": "always",
    "printWidth": 999999,
    "htmlWhitespaceSensitivity": "ignore",
    "singleAttributePerLine": false
}
justingolden21 commented 1 year ago

I was JUST about to say this and you beat me to it by 12min LMAO. +1 on this issue.

floormodelcitizen commented 1 year ago

Make that a +2

prettier-plugin-tailwindcs: v0.2.1 Tailwind CSS: v3.2.4 Node.js: v16.16.0 Package Manager: pnpm v7.13.5 Operating System: Big Sur v11.7.2

My.prettierrc:

{   "useTabs": false,   "tailwindConfig": "./tailwind.config.cjs",   "trailingComma": "es5",   "semi": false,   "singleQuote": true,   "arrowParens": "avoid",   "printWidth": 120,   "plugins": [    "prettier-plugin-svelte",    "prettier-plugin-tailwindcss"   ],   "pluginSearchDirs": [   "."   ],   "overrides": [   {   "files": "*.svelte",   "options": {    "parser": "svelte"   }   }   ] }

kuerme commented 1 year ago

@floormodelcitizen Based on your prettier configuration, if you add "prettier.documentSelectors": ["**/*.svelte"] to the vscode settings.json, prettier-plugin-tailwindcss works, and the svelte will be formatted correctly; But the plugin prettier-plugin-organize-imports will fail;

This one is right, that one is wrong 😂

thecrypticace commented 1 year ago

@floormodelcitizen

Couple of things:

  1. Your prettier version is outdated (I went snooping around your desktop clock project :D). You need at least prettier 2.6. After updating it formatting in svelte files seems to work okay.
  2. I noticed an issue where some used component imports get removed. This appears to be a problem with organize imports. The issue is present regardless of whether or not the tailwindcss plugin is enabled. Removing the organize imports plugin seems to fix the disappearing import.

So, as far as I can tell, your project seems to be working on my system at least. I'm testing on macOS Monterey but that shouldn't make a difference here.

@kuerme Could you provide a reproduction repo I can take a look at? I've got a windows machine as well I can test with.

ditoglez commented 1 year ago

Hi @thecrypticace,

You can find a demo repo here.

ditoglez commented 1 year ago

Also, if there is some code wrapped in an expression block, even after running prettier from command line won't sort the classnames: An example would be:


{#await init()}
    <div class="h-screen flex-col place-content-center bg-gray-100 flex items-center">
        <HeartIcon class="h-14 w-14 animate-ping fill-red-600" />
    </div>
{:then}
    <main class="main bg-gray-100">
        <slot />
    </main>
{/await}
thecrypticace commented 1 year ago

@ditoglez That looks like a separate bug to me. Would you please open a new issue?

ditoglez commented 1 year ago

@thecrypticace please find the issue here: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/117

thecrypticace commented 1 year ago

@ditoglez I'm looking at your reproduction repo and it is indeed having problems formatting. But it's not using prettier at all in that project:

Screen Shot 2023-01-25 at 16 00 30

I can get it to format the code if I run Format Code (Forced). So as far as prettier itself is concerned it seems to work fine. Perhaps this is a problem with the Prettier VS Code extension? I'm not entirely sure what the cause is here. There's no output to indicate what the problem might potentially be either. I expect it is likely some incompatibility with pnpm and the vscode extension but not certain.

ditoglez commented 1 year ago

@thecrypticace sorry for the late reply. I also saw that the code can be formatted through Format Code (Forced) as a workaround, which I am using at the moment. I tried switching between npm yarn and pnpm and the result is the same. Might be actually an issue with VSCode itself, I will try to take another look in my spare time.

sunneydev commented 1 year ago

I am facing the same problem when I have multiple plugins in my prettier config. Additionally, I am using a plugin for sorting imports in prettier, but it only enables the last plugin to work.

sunneydev commented 1 year ago

Might be related: https://github.com/prettier/prettier/issues/12807

EddieJeong commented 1 year ago

@ditoglez I'm looking at your reproduction repo and it is indeed having problems formatting. But it's not using prettier at all in that project:

Screen Shot 2023-01-25 at 16 00 30

I can get it to format the code if I run Format Code (Forced). So as far as prettier itself is concerned it seems to work fine. Perhaps this is a problem with the Prettier VS Code extension? I'm not entirely sure what the cause is here. There's no output to indicate what the problem might potentially be either. I expect it is likely some incompatibility with pnpm and the vscode extension but not certain.

same here. It doesn't work with my vscode and 'pnpm' but npm works.

oSethoum commented 1 year ago

Am facing the same issue with Nextsjs project on windows.

Nzent commented 1 year ago

Same issue with Next.js 13.1.6 NodeJS 18.12.1 pnpm 7.26.2 VSCode Windows

jerriclynsjohn commented 1 year ago

Same issue, Format Code (Forced) works but default formatting doesn't work for prettier-plugin-tailwindcss.

Adding this "prettier.documentSelectors": ["**/*.svelte"] to .vscode/settings.json doesn't work either.

This is my project config: prettier-plugin-tailwindcss: v0.2.2 svelte-kit: 1.0.0 tailwindcss: v3.2.4 Node.js: v18.12.1 Package Manager: pnpm v7.26.2 Operating System: Windows 11

.vscode/settings.json

// For ESLint
    "eslint.validate": ["svelte", "javascript", "javascriptreact", "html", "json", "jsonc"],
    "editor.codeActionsOnSave": {
        "source.fixAll": false
    },
    "eslint.packageManager": "pnpm",
// For Prettier
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.requireConfig": true,
// Svelte for VS Code
    "[svelte]": {
        "editor.defaultFormatter": "svelte.svelte-vscode"
    },
rolanday commented 1 year ago

+1. vs code, sveltekit. not working :'-(

dospolov commented 1 year ago

Same for me prettier-plugin-tailwindcss: 0.2.2 prettier: 2.8.3 nodejs: 18.9.1 npm: 8.19.1 vite: 4.0.4 react: 18.2.0 VScode: 1.74.3 OS: Windows 11

rolanday commented 1 year ago

interestingly, I installed on T3 this evening (figured it gotta work there!!) and, surprisingly, it did NOT work. In disbelief because such a popular setup, I uninstalled and then reinstalled the VS code prettier plug in, and then it worked for me. Seems like a long shot, but anybody running into the same might want to at least try. Good luck!

mamlzy commented 1 year ago

I solved this problem after creating .prettierrc file and adding this: { "plugins": ["prettier-plugin-tailwindcss"], "pluginSearchDirs": false }

rolanday commented 1 year ago

Going back to my SvelteKit config (after setting it work for NextT3), I discovered that having both .prettierrc and prettier.config file caused the plug-in not to load, given if .prettierrc file contents are an empty json object like so:

{
}

Pretty surprising. I went back and forth at least 6 times, assuming I forgot to save a file or something, but consistently reproduced on my machine that having both files keeps prettier for tailwinds from working (even though prettier otherwise working).

jerriclynsjohn commented 1 year ago

What's going on with the prettier plugin @reinink @adamwathan? The solutions mentioned above don't work.

hjaber commented 1 year ago

I was able to get sveltekit with tailwind & their plugins working following this answer using pnpm.

Currently, the readme on tailwind-prettier-plugin recommends changing pluginSearchDirs and specifying the order of the plugins. I didn't do either of those and both tailwind-prettier-plugin & svelte-prettier-plugin are working.

My current .prettierrc

{
    "useTabs": true,
    "singleQuote": true,
    "trailingComma": "none",
    "printWidth": 100,
    "pluginSearchDirs": ["."],
    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
joejcox commented 1 year ago

The plugin works for me in Nextjs 13 but only when I run my format script. It doesn't actually format on save - the format on save functionality actually stops working entirely after declaring this plugin in my config. When I remove it, format on save is working again

luizov commented 1 year ago

Same issue here with NextJS 13.2.3. Updated with the just released 0.2.4 version of the plugin and still the same. Manually doing a format with Format Document works but not on saving the file.

reinink commented 1 year ago

Hey folks! If you're having issues with the Prettier plugin, be sure to read the "Compatibility with other Prettier plugins" section of the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

If you're using our Prettier plugin with another Prettier plugin that's incompatible with ours, it won't work out of the box and you'll need to follow the instructions there 👍

luizov commented 1 year ago

Hey @reinink, thanks for the reply. I am not using other prettier plugins. It's a barebones Nextjs 13 project with tailwind and prettier installed. Here is the prettier.config.js file:

module.exports = {
  singleQuote: true,
  semi: true,
  plugins: [require('prettier-plugin-tailwindcss')],
  pluginSearchDirs: ["."],
  tailwindConfig: './tailwind.config.js',
}

I've just discovered that when the file extension is .js the problem occurs and if it is .jsx the plugin works. I don't know if this is mentioned in the docs as a normal behavior but couldn't find anything.

In fact, here is a repo that reproduces the issue: https://github.com/luizov/prettier-issue

philipdanielhayton commented 1 year ago

I have just got this working. My setup uses:

Firstly, a note on debugging. The Output tab in VS code spits out a load of info whenever prettier runs. This useful because it (A) shows when prettier runs, and (B) shows what config is being used. In my case, I was confused why tailwind classes weren't being sorted even though my document seemed to be formatted, turns out it was a different formatter doing the formatting. I did a bit of digging and found these two issues that set me right (1) (2)

TLDR;

1 - Rename .prettierrc to .prettierrc.cjs, then open .prettierrc.cjs and... 2 - Wrap the imports in a require and make sure tailwind is the last import. 3 - Set pluginSearchDirs to false

.prettierrc.cjs
module.exports = {
        ....
    plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
    pluginSearchDirs: false,
    overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
        ....
};

It should now work. Check the Output tab to double check that it's picking up the right config.

If Prettier still doesn't format the file, you may have to manually add a file association. Open settings in VS code, search for prettier document selectors, and add a new item: **/*.svelte

image

You can also see whether Prettier is recognizing your file in the bottom right hand corner of VS code, a double tick next to Prettier means you're all good.

image

Good luck!

lab-do commented 1 year ago

This fixed the issue for me. .prettierrc

{
  "pluginSearchDirs": ["."],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}

.vscode/settings.json

{
  "prettier.requireConfig": true,
  "prettier.documentSelectors": ["**/*.svelte"],
  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  }
}
Booligoosh commented 1 year ago

The issue for me was that I didn't have the prettier-plugin-svelte plugin, installing and adding it to my config fixed the issue 🙂

pirciualex commented 1 year ago

Hi @kuerme, I'm not sure if it helps, but the fix suggested by @lab-do works just fine (except that you don't even need to specify the plugins in the array, you can remove it entirely), with the mention that a window reload is needed. The issue that I'm facing is that prettier-plugin-organize-imports doesn't work. In your original comment, you say that it's working fine, but I'm wondering how can that be since the plugin doesn't actually have support for it (issue here)? Am I missing something?

LaminarPLayer commented 1 year ago

None of the solutions above worked in my project but I found a solution so I share it, maybe will help others too.

Situation: We had installed in our project both prettier-plugin-tailwindcss and @trivago/prettier-plugin-sort-imports for sorting import statements, however, only the latter was working. In .prettierrc we had only one of them listed: "plugins": ["prettier-plugin-tailwindcss"].

Solution: Adding the …-sort-imports plugin before (the order mattered!) prettier-plugin-tailwindcss fixed the issue. So our current, working .prettierrc file looks like that:

{
  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
  "singleQuote": true,
  "importOrder": ["<THIRD_PARTY_MODULES>", "^@(.+)/(.+)$", "^\\..+"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}
Blackwidow-sudo commented 1 year ago

Ok very weird, i got it to work now thanks to @philipdanielhayton. My setup was sveltekit+tailwind using just the svelte & tailwind plugins for prettier.

What i changed was:

  1. I made a .prettierrc.cjs out of .prettierrc like:
    module.exports = {
    arrowParens: 'avoid',
    bracketSameLine: true,
    svelteIndentScriptAndStyle: true,
    singleAttributePerLine: true,
    tabWidth: 2,
    svelteSortOrder: 'scripts-options-markup-styles',
    semi: false,
    useTabs: true,
    singleQuote: true,
    trailingComma: 'none',
    printWidth: 100,
    plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
    pluginSearchDirs: false,
    overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
    }
  2. Changed my .vscode/settings.json to:
    {
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    // before, i had the following as a TS exclusive
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    }
  3. Finally reload the window.

Hope this can help someone else.

Edit: Ok thats very weird: Same project on a mac instead of windows, i did the same changes and it doesn't work. Really annoying stuff...

shinebayar-g commented 1 year ago

Alright folks, here is the summary. I just spent a good couple of hours debugging this. This might save you some time. Thank you everyone who have commented so far. Specially ones that who mentioned renaming files to common js syntax, switching pnpm to npm etc.

  1. Using .prettierrc - npm
{
    "useTabs": true,
    "singleQuote": true,
    "trailingComma": "none",
    "printWidth": 100,
    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
    "pluginSearchDirs": false,
    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

Works. I could keep Svelte for VS Code as my default formatter. Both Prettier & Svelte formatter did the same. I am not sure if there is any difference at all here. If anyone knows please let me know.

image

  1. Using .prettierrc - pnpm

Surprisingly pnpm didn't work. I no longer see the Prettier as a formatter. Svelte for VS Code does format, but tailwind plugin doesn't work (If you look at the prettier logs, it doesn't do anything). As others said Format Document (Forced) actually works.

image

  1. Using .prettierrc.cjs - npm
module.exports = {
  useTabs: false,
  singleQuote: true,
  trailingComma: 'none',
  printWidth: 100,
  plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
  pluginSearchDirs: false,
  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
};

Works, same as above.

  1. Using .prettierrc.cjs - pnpm I don't see Prettier as a formatter. It was disabled in the corner like previously. But default formatter Svelte for VS Code picked up a tailwind plugin this time and actually worked.

image

Looks like something is wrong with pnpm x prettier setup. ~Also no need to mess with "prettier.documentSelectors": ["**/*.svelte"] .~

TLDR; if you're using pnpm make sure you're using .prettierrc.cjs

Yup found it https://github.com/prettier/prettier/pull/9167 or https://github.com/pnpm/pnpm/issues/4700

thecrypticace commented 1 year ago

Hey everyone! :wave:

It seems like there are a lot of different situations being presented in this issue, and I'm not entirely sure they all stem from the same underlying problem.

From what I can gather, most of the issues reported here seem to be related to pnpm. It's worth noting that there are known issues with Prettier itself when it comes to handling pnpm like https://github.com/prettier/prettier/pull/9167 and https://github.com/pnpm/pnpm/issues/4700.

I've got a few notes that should hopefully help anyone running into problems with pnpm:

module.exports = {
  pluginSearchDirs: false,
  plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]

  // Other prettier options here
};

Before:

module.exports = {
  pluginSearchDirs: ["."], // <-- Don't do this
  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]

  // Other prettier options here
};

After:

module.exports = {
  pluginSearchDirs: false, // <-- Do this instead
  plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]

  // Other prettier options here
};
{
  "prettier.documentSelectors": ["**/*.svelte"],
}
{
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
}

Thanks everyone for the solutions you provivded (and h/t to @shinebayar-g for the research regarding npm vs pnpm)!

At this point, I'm going to close this issue because I'm not convinced that it's directly related to this plugin but an issue with Prettier, pnpm, and plugins in general — tho I do believe this is still a good issue to keep around for people who are searching for solutions to similar problems.

shinebayar-g commented 1 year ago

@thecrypticace Thanks for clearing up how we should use prettier.documentSelectors & editor.defaultFormatter that helped a lot.

rory-orennia commented 1 year ago

I didn't have any luck getting this working in VSCode with the Prettier extension, even after following all the steps and changing my prettierrc to a prettier.config.js and using require and all that. I reverted to just having a prettierrc without the require and it's working fine with my husky -> lint-stage -> prettier --write precommit hook so I guess that's good enough for me. Hopefully something changes in the future that gets the extension working for me

Scratch all that. If you're using Svelte and pNPM, make sure the file is called .prettierrc.cjs or .prettier-config.cjs and not .prettierrc or prettier.config.js. everything starts working with the .cjs extension

harryqt commented 1 year ago

@rory-orennia Thank yo so much, it worked. I was trying to make it work for weeks. It also works with Svelte now.

kikky7 commented 1 year ago

I am using prettier-plugin-tailwindcss v0.3.0 with Next.js and tsx files and it wasn't working for me when using yarn to install node_modules and add packages. Once I switched back to npm, it started to work...

I don't use any extra config files for this like .prettierrc (and similar) mentioned here.

harryqt commented 1 year ago

@kikky7 npm suck, use pnpm.

Himayun-Khan commented 1 year ago

i am working on nextjs typescript tailwindcss project and i want to use preetier plugin tailwindcss to make my code more pretty can anyone help me out to find the solution, i am using npm

michaelhall923 commented 1 year ago

I fixed it by rolling back the vscode prettier plugin version to v9.2.0. Hope this helps.

Igloczek commented 1 year ago

If someone ends here, but is using Astro, not Svelte:

.prettierrc.cjs or prettier.config.cjs

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  overrides: [{ files: "*.astro", options: { parser: "astro" } }],
  // rest of your custom stuff
}
afi-dev commented 1 year ago

Like the users of this issue, I have a solution that works for AdonisJS users who use the Edge template, not Svelte

tested & work with : .prettierrc.cjs or prettier.config.cjs or prettier.config.js tested & work with : Prettier v3

my own prettier.config.js :

module.exports = {
  useTabs: false,
  tailwindConfig: "./tailwind.config.js", // ⚠️ Set it so you're sure to call up the Tailwind config in the right place.
  trailingComma: 'es5',
  semi: false,
  singleQuote: true,
  quoteProps: 'consistent',
  bracketSpacing: true,
  arrowParens: 'always',
  printWidth: 100,
  plugins: [
    'prettier-plugin-organize-imports',
    'prettier-plugin-organize-attributes',
    'prettier-plugin-packagejson',
    'prettier-plugin-tailwindcss',  // ⚠️ Order is very important place Tailwind prettier plugin at the end
  ],
  overrides: [ // ⚠️ If you are using edge you need also set this to add support for edge
    {
      files: '*.edge',
      options: {
        parser: 'html',
      },
    },
  ],
};

Don't forget to download VSCode Prettier Extension and add this settings inside your VSCode settings.json :

{
        ...
        "editor.formatOnSave": true,
    "[edge]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.useEditorConfig": false,
    "prettier.documentSelectors": ["**/*.edge"],
}

here you'll find a Medium that explains how to add support for an extension that doesn't exist in Prettier. (Astra, Edge, Handlebars ...)

pratyushtewari commented 1 year ago

I solved this problem after creating .prettierrc file and adding this: { "plugins": ["prettier-plugin-tailwindcss"], "pluginSearchDirs": false }

THANK YOU!

This worked.

Adding the prettier.config.js does not work as suggested in the Tailwind plugin readme.

thecrypticace commented 1 year ago

@pratyushtewari can you provide a reproduction for this?

stoddabr commented 1 year ago

If someone ends here, but is using Astro, not Svelte:

.prettierrc.cjs or prettier.config.cjs

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  overrides: [{ files: "*.astro", options: { parser: "astro" } }],
  // rest of your custom stuff
}

Not sure if my setup is different or this it out of date but I also had to install and update prettier-plugin-astro (the astro vscode extension ships with and uses prettier by default making the config finicky, it only supports prettier v3 around version 11 of the astro plugin). I had another package which install an older version of the astro plugin by default and so I had to run:

npm install -D prettier-plugin-astro prettier-plugin-tailwindcss

to get the updated, v3 compatible, plugins and then updated my .prettierrc with the list to be:

{
  "tabWidth": 2,
  "useTabs": false,
  "bracketSameLine": true,
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss"
  ]
}
pratyushtewari commented 1 year ago

@pratyushtewari can you provide a reproduction for this?

Hi @thecrypticace - my project is here: https://github.com/pratyushtewari/bbos-components , the prettier.config.js did not work for me but adding .prettierrc worked with the same content inside the config.

I think prettier is only looking for the .prettierrc file.

thecrypticace commented 1 year ago

@pratyushtewari Your project is "type": "module" by default which means your prettier config itself must also be ESM.

The following for prettier.config.js works in that case:

export default {
  "plugins": ["prettier-plugin-tailwindcss"],
}
pratyushtewari commented 1 year ago

@thecrypticace - Thanks! this worked.

I am not fluent in ESM much. to me export default and module.exports seems to be the same. I will look for more info on that.

Thanks!