Incompatibility with other Prettier plugins

[cmalard]

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31

Workaround: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1195411734

[NiklasPor]

Interesting, didn't know that a workaround actually exists.

[cmalard]

It is not actually, or failed to understand how Prettier manages it ^^" After few hours on it, I've just the feeling that we are fighting against Prettier will that do not want to do anything related to sort through it ^^"

[cmalard]

Waiting for https://github.com/angular-eslint/angular-eslint/pull/1066, I went for a dirty solution 🙈 -> I run Prettier multiple times, one for each plugin 😅

It doesn't work in IDEs that runs Prettier with all plugins at the same time, so I'm relying on husky & lint-staged to run it automatically before committing (I was already using them to run Prettier, ESLint & other stuff).

• package.json

  "scripts": {
  ...
  "prettier": "prettier . --ignore-unknown --write --plugin=prettier-plugin-organize-attributes && prettier . --ignore-unknown --write --plugin=prettier-plugin-tailwindcss",
  "prettier:check": "prettier . --ignore-unknown --check --plugin=prettier-plugin-organize-attributes && prettier . --ignore-unknown --check --plugin=prettier-plugin-tailwindcss",
  },
  "lint-staged": {
  "*": [
    "prettier --cache --ignore-unknown --write --plugin=prettier-plugin-organize-attributes",
    "prettier --cache --ignore-unknown --write --plugin=prettier-plugin-tailwindcss"
  ],
  "*.{ts,js,html}": "eslint --cache --fix"
  },

• and I've added this config to my .prettierrc

  {
  ....
  "plugins": ["prettier-plugin-tailwindcss"], // depends which one you prefer to run in your team's IDEs
  "pluginSearchDirs": ["./node_modules"], // seams mandatory, I added it here to not repeat it in each above commands
  }

[matchai]

This issue has since been addressed by prettier-plugin-tailwind. You can refer to their README for configuration to get it working correctly: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins