Flutter代码生成与规范检查插件flutter_gen_linter的使用

Flutter代码生成与规范检查插件flutter_gen_linter的使用

特性

一组简单的linter规则，鼓励使用flutter_gen。

开始使用

在您的pubspec.yaml文件中添加以下依赖：

dev_dependencies:
  custom_lint: ^0.5.0
  flutter_gen_linter: ^1.0.0

然后创建一个analysis_options.yaml文件，并添加以下内容：

analyzer:
  plugins:
    - custom_lint

现在您的IDE应该会显示linter警告，如下所示：

VS Code中显示linter警告的截图

或者，您也可以从命令行手动运行它们：

$ dart run custom_lint

lib/your_file.dart:61:18 • AssetImage or Image.asset should not be used directly instead use Assets.images... • asset_image • INFO

完整示例Demo

1. 创建pubspec.yaml

确保在pubspec.yaml中添加了必要的依赖项：

name: flutter_gen_linter_example
description: A sample Flutter project demonstrating the use of flutter_gen_linter.

environment:
  sdk: ">=2.18.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  custom_lint: ^0.5.0
  flutter_gen_linter: ^1.0.0

2. 初始化flutter_gen

首先，确保您已经安装并初始化了flutter_gen。如果尚未安装，请运行以下命令：

flutter pub get
flutter pub run flutter_gen

3. 配置analysis_options.yaml

在项目根目录下创建或编辑analysis_options.yaml文件，添加以下内容：

analyzer:
  plugins:
    - custom_lint

4. 编写代码

在lib/your_file.dart中编写以下代码：

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter_gen_linter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 错误示例：直接使用 AssetImage
            Image.asset(
              'assets/images/example.png',
              width: 100,
              height: 100,
            ),

            SizedBox(height: 20),

            // 正确示例：使用 flutter_gen 生成的 Assets 类
            Image.asset(
              Assets.images.example.path,
              width: 100,
              height: 100,
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行linter检查

在终端中运行以下命令以检查代码是否符合规范：

$ dart run custom_lint

如果代码中存在不符合规范的部分（例如直接使用AssetImage），您将看到类似以下的警告：

lib/your_file.dart:15:9 • AssetImage or Image.asset should not be used directly instead use Assets.images... • asset_image • INFO

6. 修复问题

根据警告提示，修改代码以使用flutter_gen生成的Assets类。例如，将以下代码：

Image.asset(
  'assets/images/example.png',
  width: 100,
  height: 100,
),

替换为：

Image.asset(
  Assets.images.example.path,
  width: 100,
  height: 100,
),

更多关于Flutter代码生成与规范检查插件flutter_gen_linter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter代码生成与规范检查插件flutter_gen_linter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_gen_linter 是一个用于 Flutter 项目的代码生成与规范检查的插件。它结合了 flutter_gen 和 linter 的功能，帮助开发者自动生成代码并确保代码符合一定的规范。以下是使用 flutter_gen_linter 的步骤和注意事项：

1. 安装 flutter_gen_linter

首先，你需要在 pubspec.yaml 文件中添加 flutter_gen_linter 作为开发依赖项：

dev_dependencies:
  flutter_gen_linter: ^latest_version

然后运行 flutter pub get 来安装依赖。

2. 配置 flutter_gen

flutter_gen 是一个代码生成工具，用于自动生成与资源（如图片、字体、颜色等）相关的 Dart 代码。你需要先在 pubspec.yaml 中配置 flutter_gen：

flutter_gen:
  output: lib/gen/ # 生成的代码输出目录
  line_length: 80 # 每行代码的最大长度
  integrations:
    flutter_svg: true # 如果你使用 flutter_svg

然后运行 flutter pub run build_runner build 来生成代码。

3. 配置 linter

linter 是一个静态代码分析工具，用于检查代码风格和潜在的问题。你可以在 analysis_options.yaml 文件中配置 linter：

include: package:flutter_gen_linter/analysis_options.yaml

linter:
  rules:
    - avoid_print # 禁止使用 print
    - prefer_const_constructors # 优先使用 const 构造函数
    - camel_case_types # 类型名称使用驼峰命名法

4. 使用 flutter_gen_linter

flutter_gen_linter 结合了 flutter_gen 和 linter 的功能。你可以通过以下命令来同时生成代码和检查代码规范：

flutter pub run flutter_gen_linter

这个命令会执行以下操作：

  1. 使用 flutter_gen 生成代码。
  2. 使用 linter 检查代码规范。

5. 自动化流程

为了简化开发流程，你可以将 flutter pub run flutter_gen_linter 添加到你的 CI/CD 管道中，或者在开发过程中使用 watch 模式来自动生成代码和检查规范：

flutter pub run flutter_gen_linter watch
回到顶部