tailwindcss 类的更漂亮的代码格式使文件膨胀

Question

在文件中放置代码（graphql/css/js/html）很棒。

我使用 TailwindCSS 库为我的组件设置样式，并使用 classnames 包动态插入类。

我还使用Prettier 来格式化我的代码。问题是它会将我的类规则格式化为每行一个类，这会使我的文件迅速膨胀。

通缉：

const container = cn("flex", "flex-col", "min-h-lg", "mb-12", "transition-opacity", "duration-500", "ease-in-out");
const buttons = cn(
  "inline-grid", "row-gap-5", "col-gap-10", "grid-rows-5", "grid-flow-col",
  "sm:grid", "sm:grid-cols-3",
);
const character = cn(
  "hidden", "row-span-5", "h-48", "place-self-end", "origin-center",
  "animation-once", "animation-ease-out", "animation-0.8s", "animation-fill-forwards",
  "sm:block", "sm:animation-lightspeedin",
);

我得到的更漂亮：

const container = cn(
  "flex",
  "flex-col",
  "min-h-lg",
  "mb-12",
  "transition-opacity",
  "duration-500",
  "ease-in-out"
);
const buttons = cn(
  "inline-grid",
  "row-gap-5",
  "col-gap-10",
  "grid-rows-5",
  "grid-flow-col",
  "sm:grid",
  "sm:grid-cols-3"
);
const character = cn(
  "hidden",
  "row-span-5",
  "h-48",
  "place-self-end",
  "origin-center",
  "animation-once",
  "animation-ease-out",
  "animation-0.8s",
  "animation-fill-forwards",
  "sm:block",
  "sm:animation-lightspeedin"
);

如您所见，它很快就会失控。 我想知道其他具有类似堆栈的人正在做什么来保持他们的文件可读。我一直在努力寻找少于 100 行的文件，但是使用 prettier+tailwindcss 已经不可能了。 我会选择prettier-ignore-{start,end} if that was supported on js/jsx/ts/tsx files。 你忽略每一条规则吗？

// prettier-ignore
const container = cn("flex", "flex-col", "min-h-lg", "mb-12", "transition-opacity", "duration-500", "ease-in-out");
// prettier-ignore
const buttons = cn(
  "inline-grid", "row-gap-5", "col-gap-10", "grid-rows-5", "grid-flow-col",
  "sm:grid", "sm:grid-cols-3",
);
// prettier-ignore
const character = cn(
  "hidden", "row-span-5", "h-48", "place-self-end", "origin-center",
  "animation-once", "animation-ease-out", "animation-0.8s", "animation-fill-forwards",
  "sm:block", "sm:animation-lightspeedin",
);

或者您是否将所有类移动到文件底部以使其不那么明显/减少滚动以获取组件的需要？ 我想我会同时做这两件事，并在prettier-ignore-{start,end} 可用时将它们移回文件顶部。

Answer 1

我认为 Prettier 无法改变这一点。这是很自以为是的，而且有充分的理由。您可以调整的越少，它就越能保留您的代码（大部分时间）。我认为 Prettier 的分支允许更多的定制，但老实说，我有一个更简单的解决方案给你。像这样添加你的类：

const container = cn("flex flex-col min-h-lg mb-12 transition-opacity");

const buttons = cn(
  "inline-grid row-gap-5 col-gap-10 grid-rows-5 grid-flow-col",
  "sm:grid sm:grid-cols-3",
);

const character = cn(
  "hidden row-span-5 h-48 place-self-end origin-center",
  "animation-once animation-ease-out animation-0.8s animation-fill-forwards",
  "sm:block sm:animation-lightspeedin",
);