tona-stylelint-one-utility-class-per-line

English | 中文

特性

• 代码整洁 - 强制每行一个工具类，提高可读性
• Tailwind 兼容 - 为 Tailwind CSS 和类似的 utility-first 框架设计
• 自动修复支持 - 自动格式化 class 属性
• 可配置 - 自定义规则以适应您的需求

安装

npm install -D tona-stylelint-one-utility-class-per-line

pnpm add -D tona-stylelint-one-utility-class-per-line

使用

将插件添加到您的 Stylelint 配置中：

// .stylelintrc.mjs
export default {
  plugins: ['tona-stylelint-one-utility-class-per-line'],
  rules: {
    'tona/one-utility-class-per-line': true,
  },
}

规则详情

此规则强制要求当行长度超过一定限制时，HTML class 属性每行只包含一个工具类。

有效

<!-- 短 class 属性 -->
<div class="flex items-center"></div>

<!-- 每行一个类 -->
<div
  class="
    flex
    items-center
    justify-between
    p-4
  "
></div>

无效

<!-- 一长行多个类 -->
<div
  class="flex items-center justify-between p-4 m-4 bg-blue-500 text-white"
></div>

配置选项

{
  'tona/one-utility-class-per-line': [
    true,
    {
      // 强制执行规则前的最大行长度
      maxLineLength: 80,
      // 其他选项
    }
  ]
}

自动修复

该插件支持自动修复：

stylelint "**/*.html" --fix

相关

• tona - 核心框架
• Stylelint - CSS 检查工具