Flutter代码规范与钩子校验插件flutter_hooks_lint_plugin的使用

Flutter代码规范与钩子校验插件flutter_hooks_lint_plugin的使用

flutter_hooks_lint_plugin 是一个用于 flutter_hooks 的 Dart 分析器插件，灵感来源于 eslint-plugin-react-hooks。

规则

缺失/不必要的键

检测 useEffect 调用中的缺失或不必要的键。 它会查找 HookWidget 中的构建变量（类字段、局部变量等），然后比较构建变量和 useEffect 调用中指定的键之间的引用。如果有任何差异，则报告错误。

final variable1 = callSomething();
final variable2 = callSomething();

useEffect(() {
  print(variable1);
}, [variable2]); // 缺失键 'variable1'，多余的键 'variable2'

避免嵌套使用钩子

检测是否在控制流语法（如 if, for, while 等）下使用了钩子，这是一条不好的实践。 如果在这些控制流语法下使用了钩子，则报告错误。

if (flag) {
  final variable = useState('hello'); // 避免嵌套钩子
}

安装

在 pubspec.yaml 文件中添加 flutter_hooks_lint_plugin 依赖：

dev_dependencies:
  flutter_hooks_lint_plugin: ^0.6.1

在 analyzer_options.yaml 文件中添加 flutter_hooks_lint_plugin 插件指令：

analyzer:
  plugins:
    - flutter_hooks_lint_plugin

然后运行 flutter pub get 并重启您的 IDE/编辑器。

选项

您可以通过 analysis_options.yaml 自定义插件的行为：

flutter_hooks_lint_plugin:
  exhaustive_keys:
    # 钩子在状态生命周期中不会改变
    constant_hooks:
      # 默认值
      - useRef
      - useIsMounted
      - useFocusNode
      - useContext

      # 您自定义的钩子
      - useConstantValue

抑制 lint

有几种方法可以抑制 lint：

1. 在文件顶部添加 // ignore_for_file: exhaustive_keys, nested_hooks 以抑制整个文件中的 lint。
2. 在当前行或下一行添加 // ignore: exhaustive_keys, nested_hooks 以抑制该行的 lint。
3. 在当前行或下一行添加 // ignore_keys: foo, bar 以抑制特定键的 lint。

命令行界面 (CLI)

您也可以通过命令行接口使用此插件：

$ dart pub run flutter_hooks_lint_plugin:flutter_hooks_lint analyze ./

$ flutter pub run flutter_hooks_lint_plugin:flutter_hooks_lint analyze ./

TODO

• 支持 Fix（建议）

贡献

欢迎提交 PR！

您可以修改插件的依赖项为本地路径：

dependencies:
  flutter_hooks_lint_plugin:
    path: /home/mjhd/flutter_hooks_lint_plugin # 绝对路径到克隆目录

许可证

MIT 许可证 © mjhd

完整示例

以下是一个完整的示例，展示了如何使用 flutter_hooks_lint_plugin。

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends HookWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final counter = useState(0);

    useEffect(() {
      if (title == 'Hello') {
        counter.value++;
      }

      return () {};
    }, [title]);

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}