Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plugin integration with the third-party imports plugin is not working #266

Closed
nkwwk opened this issue Apr 18, 2024 · 3 comments
Closed

Plugin integration with the third-party imports plugin is not working #266

nkwwk opened this issue Apr 18, 2024 · 3 comments
Labels
question Further information is requested

Comments

@nkwwk
Copy link

nkwwk commented Apr 18, 2024

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

v0.5.14

What version of Tailwind CSS are you using?

v3.4.3

What version of Node.js are you using?

v20.10.0

What package manager are you using?

npm

What operating system are you using?

macOS

Describe your issue

I have followed the README.md and tried to set up the project using the following config. Still, it's not working with either prettier-plugin-organize-imports, @ianvs/prettier-plugin-sort-imports, or @trivago/prettier-plugin-sort-imports.

.prettierrc.json

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "printWidth": 100,
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
  "importOrder": ["^[./]", "^@/(.*)$"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

However, prettier-plugin-organize-imports and the plugin works when the loading order is reversed.

Notes: importOrder related attributes do not affect the below situation.

.prettierrc.json

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "printWidth": 100,
  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"]
}

I am using the VS Code format on save feature with esbenp.prettier-vscode to trigger the formatting.

@thecrypticace
Copy link
Contributor

thecrypticace commented Apr 19, 2024

Hi! A few things here:

  1. Our plugin must always be listed last per the readme on plugin integration.
  2. The importOrder* attributes are options that come from a different plugin (@trivago/prettier-plugin-sort-imports) so those will not do anything for prettier-plugin-organize-imports
  3. I set up a small Vite project with Tailwind v3, prettier, and both plugins, and everything is sorting as expected.

Can you provide an example project where sorting doesn't work?

@thecrypticace thecrypticace added the question Further information is requested label Apr 19, 2024
@nkwwk
Copy link
Author

nkwwk commented Apr 28, 2024

I created a new project to test the integration, which works fine with the configuration. Besides, I installed the sorting plugin and listed it last, then closed the VS project and restarted it. Everything works fine now.

@thecrypticace
Copy link
Contributor

Okay cool — glad you got it working 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants