Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3 #186

GeoGeorgeous · 2023-07-19T12:21:48Z

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

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

What version of Node.js are you using?
v18.16.1

What package manager are you using?
npm

What operating system are you using?
Windows

package.json:

"devDependencies": {
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/adapter-static": "^2.0.2",
    "@sveltejs/kit": "^1.22.3",
    "@tailwindcss/forms": "^0.5.4",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.45.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-svelte": "^2.31.1",
    "postcss": "^8.4.26",
    "prettier": "^3.0.0",
    "prettier-plugin-svelte": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "svelte": "^4.0.5",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.4"
  },

settings.json:

{
  <...>
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.documentSelectors": ["**/*.svelte"],
  "prettier.requireConfig": true,
  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

.prettierrc:

{
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "printWidth": 100,
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "pluginSearchDirs": false,
  "overrides": [
    {
      "files": "**/*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      maxWidth: {
        '8xl': '120rem',
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
};

Hi! I'm encountering an issue while setting up the prettier-plugin-tailwindcss and prettier-plugin-svelte plugins for my Svelte app. The problem is that the tailwind classes are not being sorted, even though the prettier-plugin-svelte is functioning correctly for other formatting aspects like tabs, quotes, and empty lines.

Tailwind config is located in in the root folder, along with the rest of the configs,
Prettier debug output does not give explicit reasons.
I have tried to reinstall dependencies, restart the VSCode,
Both the "format on save" option and the npx prettier --write . command produce the same result, with no sorting of tailwind classes.

Any guidance or advice on resolving this issue would be greatly appreciated.

The text was updated successfully, but these errors were encountered:

juanpujol · 2023-07-19T12:43:08Z

@GeoGeorgeous I will recommend to stick to "prettier": "2.8.8" for now. Plugins are being upgraded to v3, documentation is not clear and there's an issue where you have to pass plugin options to the CLI commands even if configured on the pretierrc. I think this migration needs more time to mature.

I will wait a few more weeks and try to update to v3 again.

TristanBrotherton · 2023-07-19T15:53:05Z

I also have this issue, which surfaced after upgrading everything to Prettier v3. Thanks for all your hard work!

juanpujol · 2023-07-19T16:47:22Z

This is what I did in case someone else wants to give it a try:

Update prettier to v3
Update all the plugins prettier-plugin-svelte, prettier-plugin-organize-imports and prettier-plugin-tailwindcss to their latest (prettier v3 compatible) versions
Remove "pluginSearchDirs": false from the prettier config
Change the package.json script to "format": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-organize-imports --plugin=prettier-plugin-tailwindcss --write ."

Then when I run the format command it works for svelte files but it does not run the other plugins on svelte files. Imports and tailwind are not updating on my tests.

thecrypticace · 2023-07-20T23:56:28Z

Hi! When we released v3 Svelte, Astro, and all suppored plugins from v2 (as far as I know) had not yet updated. We temporarily disabled support for external plugins because of this — when using v3 only (because there's no way we would be able to shim v2 -> v3 for external plugins).

I'm taking a look at all our previously supported plugins on Monday and will try to get a release out Monday/Tuesday with any that have updated.

thecrypticace · 2023-07-25T20:20:58Z

Short update here:

I've got a prototype version of the v3 plugin with support Astro, Svelte, and other plugins. We've had to switch to using ESM for v3 because we have to use top-level await to dynamically load plugins that we have compatibility with. This is because some of them have switched to ESM which means dynamic imports return promises (… ESM really should have had a sync dynamic import primitive — at least for node :/).

I'm currently running into issues with the vscode prettier extension loading the wrong version of the plugin so it doesn't look like I'll get a release out today — sorry. But it is being worked on! :)

TristanBrotherton · 2023-07-27T17:21:18Z

Is anyone aware if there is a manual work-around for now to be able to select class strings in VsCode and use a command to sort the classes?

thecrypticace · 2023-07-27T19:57:40Z

@TristanBrotherton you can use Prettier v2 with v0.4 of this plugin and everything should work fine. Note that you'll need to use an earlier version of prettier-plugin-svelte as well. It's the prettier v3 compatibility including external plugins that's the complication at the moment.

TristanBrotherton · 2023-07-27T19:59:56Z

@thecrypticace thanks so much for the response. Unfortunately I'm locked in with Prettier V3 - its not a big deal though. I can just sort the classes retrospectively. I really appreciate your work on this, thank you from all of us!

thecrypticace · 2023-08-09T16:42:55Z

Hey all! I pushed out an insiders build that enables support for plugins!

There are two important things to note:

It supports Prettier v3+ only — ultimately we couldn't find a way to support both v2 and v3 within the same plugin and have it work with some external tools
Most but not all plugins that were supported in v2 work. Marko and Twig support have been removed as they don't support v3 currently. If they get updates to support Prettier v3 in the future we'll look into it.

I've done a good bit of testing myself and things appear to work but it would be great if you all could test our insiders build in whatever tooling you're using and report back! Also, if you're using VSCode, be sure to reload VSCode after upgrading any prettier plugins.

npm install prettier-plugin-tailwindcss@insiders

eminaliyevx · 2023-08-09T17:26:41Z

Hey all! I pushed out an insiders build that enables support for plugins!

There are two important things to note:

It supports Prettier v3+ only — ultimately we couldn't find a way to support both v2 and v3 within the same plugin and have it work with some external tools

Most but not all plugins that were supported in v2 work. Marko and Twig support have been removed as they don't support v3 currently. If they get updates to support Prettier v3 in the future we'll look into it.

I've done a good bit of testing myself and things appear to work but it would be great if you all could test our insiders build in whatever tooling you're using and report back! Also, if you're using VSCode, be sure to reload VSCode after upgrading any prettier plugins.
npm install prettier-plugin-tailwindcss@insiders

Thank you for your work. It managed to sort Tailwind classes after upgrading to the aforementioned build. By the way, I had the following Prettier config.

{ "plugins": [ "prettier-plugin-astro", "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss" ], "tailwindFunctions": ["cva"] }

wiew · 2023-08-09T19:46:12Z

it's working for me after upgrading to insiders version, vscode restart was needed. i'm using it in .astro files.
thanks for your work @thecrypticace!

baresi687 · 2023-08-09T20:01:17Z

@thecrypticace

It's working with Svelte.
In both ESM and JSON.

package.json

"prettier": "^3.0.1",
"prettier-plugin-svelte": "^3.0.3",
"prettier-plugin-tailwindcss": "^0.0.0-insiders.ac70a66",

.prettierrc.mjs/js

/** @type {import("prettier").Options} */
export default {
	useTabs: true,
	singleQuote: true,
	trailingComma: 'none',
	printWidth: 100,
	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
	overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
};

delight · 2023-08-09T20:40:50Z

I can also comfirm that it is working in VSCode after restart with

		"prettier": "^3.0.1",
		"prettier-plugin-svelte": "^3.0.3",
		"prettier-plugin-tailwindcss": "0.0.0-insiders.ac70a66",

and

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

in .prettierrc

Also changed the format run script to:
"format": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss --write .",

baresi687 · 2023-08-09T21:27:12Z

@delight

I also had to change the format script to:
"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss"
https://prettier.io/docs/en/plugins

I had this previously:
"format": "prettier --plugin-search-dir . --write .",
This does not work with .svelte files.

thecrypticace · 2023-08-09T23:56:31Z

@delight @baresi687 Prettier autoloading was removed with Prettier v3 meaning that you must specify all plugins explicitly. The --plugin-search-dir / pluginSearchDirs options no longer exist in Prettier.

evgrekov · 2023-08-10T08:21:29Z

Thanks a lot for your work. However, not working for me, tried on a clean Astro setup.

My route:
npm create astro@latest

npx astro add tailwind

npm i prettier-plugin-astro

npm install prettier-plugin-tailwindcss@insiders

.prettierrc
{"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]}

Prettier is not working at all, no formatting and no tailwind class sort.

Maybe I do something wrong?

mvllow · 2023-08-10T13:01:53Z

@evgrekov you need to install prettier, not just the plugins

Serator · 2023-08-10T13:24:34Z

Works with Svelte, but only when modifying the format run script as mentioned in #186 (comment).

thecrypticace · 2023-08-10T14:15:54Z

@Serator Do you have a prettier config file? If so, and you still have to modify the format script, can you provide a repro? This is likely to be an issue with Prettier itself.

Serator · 2023-08-10T14:20:46Z

@thecrypticace

.prettierrc

{
  "bracketSpacing": false,
  "overrides": [{"files": "*.svelte", "options": {"parser": "svelte"}}],
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "printWidth": 128,
  "semi": false,
  "singleQuote": true,
  "tailwindAttributes": ["iconClass", "imageClass", "rootClass", "titleClass"]
}

npm run script

"format": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss --write .",

I'll be able to add a repository with an example a little later.

thecrypticace · 2023-08-10T14:49:46Z

Hey all I've published v0.5.0 which mirrors the insiders build published yesterday — as such I'm closing this issue given that things seem to be working for everyone in most cases! Thanks for giving it a test — much appreciated!

thecrypticace · 2023-08-10T14:49:53Z

@Serator I'll still be looking for the update here — but like I said I suspect this is actually a Prettier problem rather than prettier-plugin-tailwindcss problem 👍

Serator · 2023-08-10T15:01:11Z

@thecrypticace It looks like my issue is described here along with an example to reproduce and it is indeed a problem with Prettier itself.

evgrekov · 2023-08-10T16:39:59Z

@mvllow thanks it's working now :)

Vaiterius · 2023-11-21T08:48:33Z

Thanks a lot for your work. However, not working for me, tried on a clean Astro setup.

My route: npm create astro@latest

npx astro add tailwind

npm i prettier-plugin-astro

npm install prettier-plugin-tailwindcss@insiders

.prettierrc {"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]}

Prettier is not working at all, no formatting and no tailwind class sort.

Maybe I do something wrong?

Adding on to this, make sure "prettier-plugin-tailwindcss" comes last in the plugins list as referenced by this comment in another thread. I had these two reversed and had a rough time figuring out why they weren't being compatible 😅

aurelienbobenrieth · 2023-11-21T12:03:20Z

@Vaiterius
I still have conflict on a project, I posted my config here.
Do you have any tips ?

Frost-on-Web · 2023-12-03T06:38:30Z

Hi,

{
  "tailwindFunctions": ["cn"],
  "overrides": [
    { "files": ["*.astro"], "options": { "parser": "astro" } },
    { "files": ["*.html"], "options": { "tabWidth": 8 } }
  ],
  "tailwindConfig": "./tailwind.config.js",
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
}

VSCode auto format (on save) doesn't apply the "prettier-plugin-tailwindcss" effects.

BUT, at least, i found that
yarn run prettier --plugin=prettier-plugin-astro --plugin=prettier-plugin-tailwindcss --write .

is working.

I tried both :
prettier-plugin-tailwindcss@0.5.7 and prettier-plugin-tailwindcss@insiders
with the same result.

So my workaround will be to have a package.json (npm/yarn) command such as :
"format": "yarn run prettier --plugin=prettier-plugin-astro --plugin=prettier-plugin-tailwindcss --write ."

I thank you for all of your work, past and future ;-) Bye

hwk-omv · 2023-12-23T20:49:04Z

BUT, at least, i found that yarn run prettier --plugin=prettier-plugin-astro --plugin=prettier-plugin-tailwindcss --write .

is working.

That is interesting. I still can not manage to achieve that in my Astro project. With none of the suggested solutions, unfortunately.

mmartinrm97 · 2024-01-19T02:38:44Z

Thanks a lot for your work. However, not working for me, tried on a clean Astro setup.

My route: npm create astro@latest

npx astro add tailwind

npm i prettier-plugin-astro

npm install prettier-plugin-tailwindcss@insiders

.prettierrc {"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]}

Prettier is not working at all, no formatting and no tailwind class sort.

Maybe I do something wrong?

I follow this blog, and it works for me:
https://webreaper.dev/posts/astro-prettier-tailwind-setup/

this is my package.json:

 "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro",
    "format": "prettier  --plugin=prettier-plugin-astro --plugin=prettier-plugin-tailwindcss --write ."
  },

TristanBrotherton mentioned this issue Jul 19, 2023

Prettier v3 doesn't support option "pluginSearchDirs": false #187

Closed

thecrypticace self-assigned this Jul 20, 2023

thecrypticace mentioned this issue Jul 24, 2023

Plugin not working #191

Closed

Princesseuh mentioned this issue Jul 27, 2023

🐛 BUG: prettier-plugin-tailwindcss doesn't work in .astro files withastro/prettier-plugin-astro#202

Closed

thecrypticace changed the title ~~Classes not sorted with prettier-plugin-tailwindcss and prettier-plugin-svelte~~ Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3 Jul 28, 2023

thecrypticace closed this as completed Aug 10, 2023

souvikmishra mentioned this issue Oct 3, 2023

npm run lint causes a warning for every file: [warn] Ignored unknown option { pluginSearchDirs: ["."] }. due to Prettier sveltejs/kit#10751

Closed

kaljarv mentioned this issue Mar 16, 2024

Investigate and fix prettier pluginSearchDir option error OpenVAA/voting-advice-application#426

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3 #186

Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3 #186

GeoGeorgeous commented Jul 19, 2023 •

edited

juanpujol commented Jul 19, 2023 •

edited

TristanBrotherton commented Jul 19, 2023

juanpujol commented Jul 19, 2023

thecrypticace commented Jul 20, 2023

thecrypticace commented Jul 25, 2023

TristanBrotherton commented Jul 27, 2023

thecrypticace commented Jul 27, 2023 •

edited

TristanBrotherton commented Jul 27, 2023

thecrypticace commented Aug 9, 2023 •

edited

eminaliyevx commented Aug 9, 2023

wiew commented Aug 9, 2023 •

edited

baresi687 commented Aug 9, 2023 •

edited

delight commented Aug 9, 2023 •

edited

baresi687 commented Aug 9, 2023 •

edited

thecrypticace commented Aug 9, 2023

evgrekov commented Aug 10, 2023

mvllow commented Aug 10, 2023

Serator commented Aug 10, 2023

thecrypticace commented Aug 10, 2023

Serator commented Aug 10, 2023

thecrypticace commented Aug 10, 2023

thecrypticace commented Aug 10, 2023

Serator commented Aug 10, 2023

evgrekov commented Aug 10, 2023

Vaiterius commented Nov 21, 2023

aurelienbobenrieth commented Nov 21, 2023

Frost-on-Web commented Dec 3, 2023

hwk-omv commented Dec 23, 2023

mmartinrm97 commented Jan 19, 2024

Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3 #186

Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3 #186

Comments

GeoGeorgeous commented Jul 19, 2023 • edited

juanpujol commented Jul 19, 2023 • edited

TristanBrotherton commented Jul 19, 2023

juanpujol commented Jul 19, 2023

thecrypticace commented Jul 20, 2023

thecrypticace commented Jul 25, 2023

TristanBrotherton commented Jul 27, 2023

thecrypticace commented Jul 27, 2023 • edited

TristanBrotherton commented Jul 27, 2023

thecrypticace commented Aug 9, 2023 • edited

eminaliyevx commented Aug 9, 2023

wiew commented Aug 9, 2023 • edited

baresi687 commented Aug 9, 2023 • edited

delight commented Aug 9, 2023 • edited

baresi687 commented Aug 9, 2023 • edited

thecrypticace commented Aug 9, 2023

evgrekov commented Aug 10, 2023

mvllow commented Aug 10, 2023

Serator commented Aug 10, 2023

thecrypticace commented Aug 10, 2023

Serator commented Aug 10, 2023

thecrypticace commented Aug 10, 2023

thecrypticace commented Aug 10, 2023

Serator commented Aug 10, 2023

evgrekov commented Aug 10, 2023

Vaiterius commented Nov 21, 2023

aurelienbobenrieth commented Nov 21, 2023

Frost-on-Web commented Dec 3, 2023

hwk-omv commented Dec 23, 2023

mmartinrm97 commented Jan 19, 2024

GeoGeorgeous commented Jul 19, 2023 •

edited

juanpujol commented Jul 19, 2023 •

edited

thecrypticace commented Jul 27, 2023 •

edited

thecrypticace commented Aug 9, 2023 •

edited

wiew commented Aug 9, 2023 •

edited

baresi687 commented Aug 9, 2023 •

edited

delight commented Aug 9, 2023 •

edited

baresi687 commented Aug 9, 2023 •

edited