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} 如果 js/jsx/ts/tsx 文件支持的话，我会选择的。你是否忽视了每一条规则？

// 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",
);