智能动态代码片段

Flu CLI VSCode 扩展提供智能动态代码片段功能，会根据你的项目配置（.flu-cli.json）自动适配可用的代码片段。

✨ 智能特性

• 自动识别项目架构：根据 .flu-cli.json 中的 template 和 withBasePage 配置，智能显示适合的代码片段
• 动态过滤：如果项目禁用了 BasePage，相关的代码片段会自动隐藏
• 无需手动同步：配置更改后，代码片段会自动更新，无需任何额外操作
• 零配置使用：打开 Dart 文件即可使用，扩展会自动激活

使用方法

1. 在 .dart 文件中输入片段前缀（如 st）
2. VSCode 会自动显示可用的代码片段
3. 选择需要的片段，按 Tab 或 Enter 展开
4. 使用 Tab 在占位符间跳转
5. 完成编辑

配置示例

代码片段会根据项目配置自动适配：

{
  "template": "custom",
  "generators": {
    "page": {
      "withBasePage": false // 禁用 BasePage
    }
  }
}

当 withBasePage: false 时，stPage (BasePage) 和 viewmodel 代码片段会自动隐藏。

可用代码片段

页面相关

stPage - Stateful Page (BasePage)

前缀: stPage

显示条件: 仅在启用 BasePage 时显示（withBasePage: true）

生成代码:

import 'package:flutter/material.dart';
import '../base/base_page.dart';
import '../viewmodels/home_viewmodel.dart';

class HomePage extends BasePage<HomeViewModel> {
  const HomePage({Key? key}) : super(key: key);

  @override
  HomeViewModel createViewModel() => HomeViewModel();

  @override
  Widget buildPage(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Container(),
    );
  }
}

使用场景: 创建继承自 BasePage 的页面，适用于 Lite/Modular 架构

stSimplePage - Stateful Page (Simple)

前缀: stSimplePage

显示条件: 始终显示

使用场景: 创建标准的 StatefulWidget 页面

lessPage - Stateless Page (Simple)

前缀: lessPage

显示条件: 始终显示

使用场景: 创建简单的无状态页面

listPage - List Page

前缀: listPage

显示条件: 启用 BasePage

使用场景: 创建继承自 BaseListPage 的列表页面，自动包含下拉刷新和上拉加载逻辑。

组件相关

stWidget - StatefulWidget

前缀: stWidget

使用场景: 创建有状态的组件

lessWidget - StatelessWidget

前缀: lessWidget

使用场景: 创建无状态的组件

stComponent - Stateful Component

前缀: stComponent

使用场景: 创建通用的有状态组件

component - Stateless Component

前缀: component

使用场景: 创建通用的无状态组件

逻辑层片段

viewmodel - ViewModel

前缀: viewmodel

显示条件: 仅在启用 BasePage 时显示（withBasePage: true）

使用场景: 创建继承自 BaseViewModel 的 ViewModel 类

listViewModel - List ViewModel

前缀: listViewModel

显示条件: 启用 BasePage

使用场景: 创建继承自 BaseListViewModel 的列表逻辑类，预置了分页、数据加载逻辑。

数据层片段

model - 数据模型

前缀: model

使用场景: 创建数据模型类（包含 fromJson/toJson/copyWith）

service - 服务类

前缀: service

显示条件: 始终显示

使用场景: 创建基础服务类

serviceNetwork - 网络服务类 (Dio)

前缀: serviceNetwork

显示条件: 始终显示

生成代码:

import '../core/network/app_http.dart';

class ProductService {
  final AppHttp _http;

  ProductService({AppHttp? http}) : _http = http ?? AppHttp();

  Future<List<dynamic>> fetchList() async {
     // ... 自动带有 Mock 和网络请求逻辑
  }
}

使用场景: 创建集成了 AppHttp 网络客户端的 Service 类，支持 Mock 数据降级。

完整代码片段列表

前缀	说明	显示条件
stPage	Stateful Page (BasePage)	启用 BasePage
stSimplePage	Stateful Page (Simple)	始终显示
lessPage	Stateless Page (Simple)	始终显示
listPage	List Page (BaseListPage)	启用 BasePage
viewmodel	ViewModel (BaseViewModel)	启用 BasePage
listViewModel	ListVM (BaseListViewModel)	启用 BasePage
service	Service 类	始终显示
serviceNetwork	Network Service (Dio)	始终显示
stWidget	Stateful Widget	始终显示
lessWidget	Stateless Widget	始终显示
stComponent	Stateful Component	始终显示
component	Stateless Component	始终显示
model	Model 类	始终显示

自定义代码片段

你可以创建自己的代码片段：

步骤 1：打开片段设置

1. 打开命令面板（Cmd+Shift+P / Ctrl+Shift+P）
2. 输入 Preferences: Configure User Snippets
3. 选择 dart.json

步骤 2：添加片段

{
  "My Custom Widget": {
    "prefix": "mywidget",
    "body": [
      "class ${1:MyWidget} extends StatelessWidget {",
      "  const ${1:MyWidget}({Key? key}) : super(key: key);",
      "",
      "  @override",
      "  Widget build(BuildContext context) {",
      "    return ${2:Container}();",
      "  }",
      "}"
    ],
    "description": "My custom widget template"
  }
}

步骤 3：使用片段

在 .dart 文件中输入 mywidget，按 Tab 展开。

片段变量

片段支持以下变量：

变量	说明	示例
${1:placeholder}	第一个占位符	${1:MyWidget}
${2:placeholder}	第二个占位符	${2:Container}
$1	引用第一个占位符	class $1
$TM_FILENAME_BASE	文件名（无扩展名）	home_page
$TM_DIRECTORY	目录名	pages

最佳实践

1. 使用一致的命名

• Page 片段：xxxPage
• ViewModel 片段：xxxViewModel
• Widget 片段：xxxWidget

2. 合理使用占位符

{
  "body": [
    "class ${1:MyWidget} extends StatelessWidget {",
    "  const ${1:MyWidget}({Key? key}) : super(key: key);",
    "  // 使用 $1 引用第一个占位符",
    "}"
  ]
}

3. 添加描述

{
  "description": "Create a stateless widget with custom styling"
}

常见问题

片段不生效？

1. 确认文件类型是 .dart
2. 检查片段前缀是否正确
3. 尝试重启 VSCode

如何查看所有片段？

1. 打开命令面板（Cmd+Shift+P / Ctrl+Shift+P）
2. 输入 Insert Snippet
3. 查看可用片段列表

相关链接

• 快速开始
• 生成文件
• VSCode 片段文档