Flutter代码质量与规范插件jaspr_lints的使用

Jaspr Lints

此包为Jaspr项目提供了代码质量检查（lints）和代码辅助功能。

代码辅助功能

• 创建 StatelessComponent / StatefulComponent / InheritedComponent
• 将 StatelessComponent 转换为 StatefulComponent
• 将 StatelessComponent 转换为 AsyncStatelessComponent
• 从树中移除组件
• 使用 div() / section() / ul() 或任何HTML组件包裹组件
• 使用其他组件包裹组件
• 使用 Builder 包裹组件
• 提取子树到 StatelessComponent
• 向HTML组件添加样式
• 将导入转换为仅限Web/仅限服务器的导入

Lints

• 建议使用 div(...) 等HTML方法而不是 DomComponent(tag: 'div', ...)。 (修复可用)
• 在HTML组件方法中将子属性排序到最后。 (修复可用)

设置

安装jaspr_lints

在你的 pubspec.yaml 文件中，添加 jaspr_lints 作为开发依赖：

dart pub add jaspr_lints --dev

配置分析选项

在你的 analysis_options.yaml 文件中，添加以下配置：

analyzer:
  plugins:
    - custom_lint

运行 dart pub get 后，当你对像 div() 或 p() 这样的组件函数进行代码辅助时，你会看到额外的Jaspr lints。

使用

不幸的是，直接运行 dart analyze 并不会识别这些自定义lints。你需要运行一个单独的命令：jaspr analyze。

此外，启用或禁用特定的lint规则的方式略有不同。在 analysis_options.yaml 文件中，添加以下部分：

custom_lint:
  rules:
    prefer_html_methods: true
    sort_children_properties_last: true

示例代码

下面是一个完整的示例代码，展示了如何设置并使用 jaspr_lints 插件。

示例代码结构

project/
├── lib/
│   ├── main.dart
│   └── components.dart
├── analysis_options.yaml
└── pubspec.yaml

pubspec.yaml

name: example_jaspr_project
description: An example project using Jaspr lints.

version: 1.0.0

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  jaspr: ^0.2.0

dev_dependencies:
  jaspr_lints: ^0.2.0
  build_runner: ^2.0.0
  build_web_compilers: ^2.0.0

analysis_options.yaml

analyzer:
  plugins:
    - custom_lint
custom_lint:
  rules:
    prefer_html_methods: true
    sort_children_properties_last: true

lib/components.dart

import 'package:jaspr/jaspr.dart';

// 创建一个无状态组件
StatelessComponent createMyComponent() {
  return StatelessComponent(
    builder: (context) => div([
      p('Hello World!'),
      ul([
        li(['Item 1']),
        li(['Item 2']),
      ]),
    ]),
  );
}

// 创建一个有状态组件
class MyStatefulComponent extends StatefulComponent {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield div([
      p('This is a stateful component.'),
    ]);
  }
}

lib/main.dart

import 'package:jaspr/jaspr.dart';
import 'components.dart';

void main() {
  runApp(App());
}

class App extends StatelessComponent {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield div([
      h1(['Welcome to Jaspr Lints Example']),
      createMyComponent(),
      MyStatefulComponent(),
    ]);
  }
}

运行分析命令

确保所有依赖项都已安装：

dart pub get

然后运行 jaspr analyze 来检查代码质量：

jaspr analyze