😎

prettier-plugin-tailwindcssと他プラグインの競合

2023/04/05に公開

Tailwind CSS

Prettier

tech

エラー状況

prettier-plugin-tailwindcssと以下のプラグイン等を導入した際に、一部もしくは全てのプラグインが動作しないことが確認できています。

@prettier/plugin-php
@prettier/plugin-pug
@shopify/prettier-plugin-liquid
@ianvs/prettier-plugin-sort-imports
@trivago/prettier-plugin-sort-imports
prettier-plugin-astro
prettier-plugin-css-order
prettier-plugin-import-sort
prettier-plugin-jsdoc
prettier-plugin-organize-attributes
prettier-plugin-organize-imports
prettier-plugin-style-order
prettier-plugin-svelte
prettier-plugin-twig-melody

解決方法

prettier-plugin-tailwindcssを最後に読み込む必要があります。

pluginSearchDirsオプションをオフにして、プラグイン読み込み設定を.prettierrcに追記する必要があります。

.prettierrc

{
  // ...
  "plugins": [
    "prettier-plugin-svelte",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss" // 最後に読み込む
  ],
  "pluginSearchDirs": false
}

参考

GitHubで編集を提案

エラー状況

解決方法

参考

Discussion