Prettier-plugin-tailwindcss 在 PhpStorm 中不起作用

Question

我已按照文档进行操作，Prettier 已安装并正常工作，但

prettier-plugin-tailwindcss

似乎不起作用，至少当我使用 Prettier 重新格式化时，没有对 Tailwind 类进行排序。

.prettierrc.json

：

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": true,
    "bracketSameLine": true,
    "htmlWhitespaceSensitivity": "ignore",
    "printWidth": 80,
    "plugins": [
        "prettier-plugin-tailwindcss"
    ],
    "tailwindConfig": "./tailwind.config.cjs"
}

tailwind.config.cjs

：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/App.vue', './src/**/*.js', './src/**/*.vue'],
  darkMode: 'class',
  theme: {
    extend: {
      boxShadow: {
        hero: '0 0 10px 0 rgba(0, 0, 0, 0.5)',
        main: '0 0 15px 0 rgba(0, 0, 0, 0.07)',
        'main-hover': '0 0 8px 0 rgba(0, 0, 0, 0.2)',
      },
      fontFamily: {
        josefin: ['Josefin Sans', 'sans-serif'],
      },
      animation: {
        rotate: 'rotate 0.15s ease-out forwards',
        rotateBack: 'rotateBack 0.15s ease-out forwards',
      },
      keyframes: {
        rotate: {
          '0%': { transform: 'rotate(0)' },
          '100%': { transform: 'rotate(180deg)' },
        },
        rotateBack: {
          '0%': { transform: 'rotate(180deg)' },
          '100%': { transform: 'rotate(0)' },
        },
      },
    },
  },
  plugins: [],
}

来自

package.json

：

  "devDependencies": {
    "@types/node": "^20.2.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "prettier-plugin-vue": "^1.1.6",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.4",
    "unplugin-auto-import": "^0.16.2",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.3.9",
    "vite-plugin-pages": "^0.30.1",
    "vue-tsc": "^1.6.5"
  }

我正在使用 TypeScript 并安装了 Prettier 插件。

Answer 1

非常适合我。确保您安装了“prettier”和“prettier-plugin-tailwindcss”软件包。

这是我的

.prettierrc

配置，与 tailwind css 自动排序类一起使用

{
  "arrowParens": "always",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

这是我的 phpstorm 更漂亮的设置：

这是我的保存操作：

Answer 2

检查这个 PhpStprm 插件

对于其他想要在保存时自动格式化 Tailwindcss 类的人。请跟随我的指导：

• 安装 Prettier 和插件：yarn add -D prettier prettier-plugin-tailwindcss
• 进入Webstorm或PhpStorm中的Prettier设置，并在node_modules中设置prettier的正确路径。确保 Prettier 版本为 3.0.x
• 更新你的 package.json，prettier 部分如下： "prettier": { "printWidth": 80, "semi": false, "bracketSameLine": true, "trailingComma": "es5", "tabWidth": 2 , "singleQuote": true, "bracketSpacing": false, "arrowParens": "always", "singleAttributePerLine": true, "plugins": [ "prettier-plugin-tailwindcss" ] },
• 转到“工具”->“保存操作”，选中“Prettier”
• 重新启动您的 IDE 并享受吧！

"prettier": { "printWidth": 80, "semi": false, "bracketSameLine": true, "trailingComma": "es5", "tabWidth": 2, "singleQuote": true, "bracketSpacing": false, "arrowParens": "always", "singleAttributePerLine": true, "plugins": [ "prettier-plugin-tailwindcss" ] },

而且它确实有效！ :)）