Flutter代码质量检查插件mix_lint的使用

Mix Lint 是一个强大的工具，可以帮助你在 Flutter 应用中通过 Mix 强制执行编码标准和最佳实践。

开始使用

在你的 Flutter 项目的根目录下运行以下命令：

flutter pub add -d mix_lint custom_lint

然后编辑你的 analysis_options.yaml 文件并添加以下代码：

analyzer:
  plugins:
    - custom_lint

接着运行以下命令：

flutter clean
flutter pub get
dart run custom_lint

自定义规则

某些规则具有自己的配置选项。你可以在 analysis_options.yaml 文件中自定义这些规则。例如，你可以自定义 mix_max_number_of_attributes_per_style 规则：

custom_lint:
  rules:
    - mix_max_number_of_attributes_per_style:
      max_number: 11

规则

mix_attributes_ordering

确保在 Style 构造函数中按同一类别的属性分组进行排序。这使得代码更易于阅读和理解样式。

不要这样做

Style (
    $box.color.red(),
    $text.color.blue(),
    $box.height(200),
    $text.style.fontSize(10),
)

要这样做

Style (
    $box.color.red(),
    $box.height(200),
    $text.color.blue(),
    $text.style.fontSize(10),
)

mix_avoid_defining_tokens_or_variants_within_style

确保不在 Style 构造函数中直接创建 Variant 和 MixToken 实例。相反，在 Style 构造函数外部实例化 Variant 和 MixToken。

Variant 和 MixToken 应在整个应用程序中共享。如果它们是在 Style 中创建的，这意味着它们仅限于该 Style，并且将更难重用。

不要这样做

Style(
    const Variant('example')(
        $text.textAlign.center(),
        $box.height(200),
        $box.width(200),
    ),
)

Style(
    $box.color.ref(ColorToken('primary')),
)

要这样做

final example = Variant('example');

Style(
    example(
        $text.textAlign.center(),
        $box.height(200),
        $box.width(200),
    ),
)

final primary = ColorToken('primary');

Style(
    $box.color.ref(primary),
)

mix_avoid_defining_tokens_within_theme_data

确保不在 MixThemeData 构造函数中直接创建 Tokens 实例。

当你在 MixThemeData 中创建 token 时，你实际上是在创建一个局部作用域，可能在应用程序的其他地方不容易访问。这可能导致不必要的 token 重复创建或更糟糕的是，重复努力来重用它们。

不要这样做

MixThemeData(
    colors: {
        const ColorToken('a'): Colors.black12,
    }
)

要这样做

final primary = ColorToken('a');

MixThemeData(
    colors: {
        primary: Colors.black12,
    }
)

mix_avoid_empty_variants

避免直接在 Style 中创建空的 Variants。空的 Variants 实际上是没有用的，并且会使代码更难以阅读和理解。

不要这样做

final a = Variant('a');

final wrong_case = Style(
  a(),
);

要这样做

final correct_case = Style(
  a(
    $box.color.amber(),
  ),
);

mix_avoid_variant_inside_context_variant

ContextVariant 和标准的 Variant 在 Style 生命周期的不同阶段应用。因此，我们强烈建议不要在 ContextVariant 的作用域内创建 Variant。相反，可以使用 & 和 | 操作符组合 Variants。

不要这样做

final variantTest = Variant('test');

Style (
    $box.color.red(),
    $on.hover(
        $box.color.green(),
        variantTest(
            $box.color.blue(),
        )
    ),
)

要这样做

final variantTest = Variant('test');

Style (
    $box.color.red(),
    $on.hover(
        $box.color.green(),
    ),
    ($on.hover & variantTest)(
        $box.color.blue(),
    ),
)

mix_max_number_of_attributes_per_style

限制每个 Style 的属性数量。默认值为 10。此规则旨在鼓励开发者保持其样式简洁，专注于几个关键方面。

不要这样做

final style = Style (
    $attribute1(),
    $attribute2(),
    $attribute3(),
    $attribute4(),
    $attribute5(),
    $attribute6(),
    $attribute7(),
    $attribute8(),
    $attribute9(),
    $attribute10(),
    $attribute11(),
);

要这样做

final auxStyle = Style(
    $attribute1(),
    $attribute2(),
    $attribute3(),
    $attribute4(),
    $attribute5(),
);

final mainStyle = Style(
    auxStyle(),
    $attribute6(),
    $attribute7(),
    $attribute8(),
    $attribute9(),
    $attribute10(),
    $attribute11(),
);