對變量內的順風類進行排序

Question

我為 tailwind 安裝了一個更漂亮的插件，在對className屬性中的類名進行排序時效果很好。 但是，它不會對像const className = 'pt-1 p-3'這樣的變量內的類名進行排序。

我能做些什么來使排序成為可能嗎？

Answer 1

看起來插件只是在尋找要排序的實用程序類字符串的class和className JSX 屬性。 您可以在插件代碼中看到：

function transformJavaScript(ast, { env }) {
  visit(ast, {
    JSXAttribute(node) {
      if (!node.value) {
        return
      }
      if (['class', 'className'].includes(node.name.name)) {

      ...

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/src/index.js#L318

Answer 2

不允許將其固定為常量； 因為它是 JSX 的屬性標准。 試着為它停課，謝謝

Answer 3

我認為目前沒有辦法使用prettier-plugin-tailwindcss做到這一點。 但是，如果您願意關閉替代方案，則可以使用 vscode 插件Headwind 。

不幸的是，Headwind 僅在保存或鍵綁定時運行（它沒有集成到 CI/CD、自動化的 Prettier 流程​​中），並且您必須使用 vscode 進行開發。 但是，如果這適合您的用例，您可以使用正則表達式來自定義 Headwind 在源代碼中的運行位置。 說明在這里。