css 有没有一种方法可以提高代码中顺风类名的可读性？

gorkyyrv 于 11个月前发布在其他

关注(0)|答案(4)|浏览(132)

当使用TailwindCSS时，className字段很容易在右侧拉伸，使其难以阅读和编辑。
下面是一个示例：
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"个
如果您的编辑器上有两个窗口，则其中一部分很可能不可见。
有没有VSCode或CLI工具来解决这个问题并提高可读性？
谢谢你，谢谢

css

来源：https://stackoverflow.com/questions/77217630/is-there-a-way-to-improve-readability-of-tailwind-classnames-in-code

4条答案

按热度按时间

t3irkdon1#

是的，在VS代码中只需按Alt + Z基本上它的自动换行
或
在VC代码中，去查看那里你可以启用自动换行

赞(0）回复(0）举报 11个月前

voase2hg2#

1.第一件事是保持类从外部到内部的顺序。像边距>宽度/高度>边框>填充等。
1.下一步是将诸如：hover：visited after all这样的操作保留在元素的默认状态中
1.第三步是保留在框架/核心之外的自定义类，
1.在类的最后，Snake人保留类，其唯一目的是成为JS锚（这不像我推荐的，但经常看到它）
很多人不喜欢下一步，但有时你可以看到人们保持长期类/风格列表在垂直布局
在我看来，长元素读取类的方式更好，但也会花费几个字节，而且它会让你同时看到更少的代码。

<html>
<body>
   <div className="
     group
     rounded-lg
     border
     border-transparent
     px-5
     py-4
     transition-colors
     hover:border-gray-300
     hover:bg-gray-100
     hover:dark:border-neutral-700
     hover:dark:bg-neutral-800/30
     "
   >
      Content
   </div>
</body>
</html>

字符串
最糟糕的方法是混合它，就像：

<html>
<body>
   <div className="
     group
     rounded-lg border border-transparent
     px-5 py-4
     transition-colors
     hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30
     "
   >
      Content
   </div>
</body>
</html>

型
最糟糕的原因是，如果一些行太长，它们会被包裹起来，这会扰乱层次结构。

赞(0）回复(0）举报 11个月前

7vux5j2d3#

在处理更复杂的类时，这也困扰着我，所以我决定创建一个ESLint plugin，它提供了在特定的printWidth下自动 Package 长类名的修复。
它可以通过npm安装：

npm i -D eslint-plugin-readable-tailwind

字符串
默认情况下，它会将长字符串转换为模板文字，对类进行逻辑排序，按修饰符分组，并在特定的printWidth自动换行。
您的示例代码将被格式化如下：

<div className={`
  group rounded-lg border border-transparent px-5 py-4 transition-colors

  hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700
  hover:dark:bg-neutral-800/30
`} />

型
插件的每个部分都是可配置的，它的设计工作以及没有漂亮。
如果将ESLint设置为在保存时应用修复，则类将在保存时自动格式化。

赞(0）回复(0）举报 11个月前

djmepvbi4#

我可能发现这个线程有点晚，但有一个prettier plugin，我去年发布的。也许这会有所帮助。

赞(0）回复(0）举报 11个月前