Prettier自动换行后导致VSCode Tailwind智能提示或类排序失效

在React项目中使用Prettier、Tailwind及twin.macro时遇到以下问题：当组件的类名字符串长度超过Prettier的printWidth阈值时，Prettier会自动对twin.macro的调用部分换行，但此时Tailwind智能提示和prettier-plugin-tailwindcss的自动类排序功能都会失效。

示例代码 #

原始未格式化的组件代码：

const ControlsButton = tw(Button)`aspect-auto w-full justify-start gap-3 rounded-none border-gray border-b py-4 px-8 last:border-0 md:aspect-square md:w-10 md:justify-center md:rounded-full md:border-0 md:p-0`

Prettier格式化后的代码（此时智能提示/类排序失效）：

const ControlsButton = tw(
    Button
)`aspect-auto w-full justify-start gap-3 rounded-none border-gray border-b py-4 px-8 last:border-0 md:aspect-square md:w-10 md:justify-center md:rounded-full md:border-0 md:p-0`

手动对类名字符串换行后，功能恢复正常：

const ControlsButton = tw(Button)`aspect-auto w-full justify-start gap-3 rounded-none 
    border-gray border-b py-4 px-8 last:border-0 md:aspect-square .................. md:p-0`

但保存后Prettier会再次自动格式化，回到twin(Button)被拆分成多行的状态。

已尝试的解决方案 #

• 使用// prettier-ignore阻止换行，但这种方式需要逐个添加，非常不方便。
• 在VSCode的settings.json中配置tailwindCSS.experimental.classRegex，尝试匹配换行后的twin.macro语法，但没有效果：

  {
      ...
      "tailwindCSS.experimental.classRegex": [
          "tw\\(\n.*?\n\\)`([^`]*)" // tw(\nComponent\n)`...`
      ],
      ...
  }
  

请问有没有更高效的解决方案？还是只能依赖// prettier-ignore配合手动换行？

内容的提问来源于stack exchange，提问作者mezerap