Flu-CLI 智能动态代码片段使用指南
🎯 核心特性
Flu CLI VSCode 扩展提供智能动态代码片段功能，会根据你的项目配置（.flu-cli.json）自动适配可用的代码片段。
✨ 智能特性
- 自动识别项目架构：根据
.flu-cli.json中的template和withBasePage配置，智能显示适合的代码片段 - 动态过滤：如果项目禁用了 BasePage，相关的代码片段会自动隐藏
- 无需手动同步：配置更改后，代码片段会自动更新，无需任何额外操作
- 零配置使用：打开 Dart 文件即可使用，扩展会自动激活
📝 使用方法
1. 基本使用流程
- 在
.dart文件中输入 snippet 前缀(如st) - VSCode 会自动显示可用的代码片段
- 选择需要的片段，按
Tab或Enter展开 - 光标会自动定位到第一个参数位置
- 输入参数值(如
Home) - 按
Tab跳转到下一个参数 - 重复步骤 5-6 直到所有参数填写完毕
2. 配置示例
代码片段会根据项目配置自动适配：
启用 BasePage 的项目：
json
{
"template": "lite",
"generators": {
"page": {
"withBasePage": true // 启用 BasePage（默认）
}
}
}输入 st 会看到：
- ✅
Flu: Stateful Page (BasePage)- 继承自 BasePage - ✅
Flu: Stateful Page (Simple)- 标准 StatefulWidget - ✅
Flu: Stateful Widget - ✅
Flu: Stateful Component
禁用 BasePage 的项目：
json
{
"template": "custom",
"generators": {
"page": {
"withBasePage": false // 禁用 BasePage
}
}
}输入 st 会看到：
- ❌
Flu: Stateful Page (BasePage) - ✅
Flu: Stateful Page (Simple)- 标准 StatefulWidget - ✅
Flu: Stateful Widget - ✅
Flu: Stateful Component
3. Tabstop 语法说明
| 语法 | 说明 | 示例 |
|---|---|---|
${1:Name} | 第1个参数,默认值为 Name | 输入 Home 后,所有 ${1:Name} 都会替换为 Home |
${2:Title} | 第2个参数,默认值为 Title | 独立参数,需要单独输入 |
${2:${1/(.*)/${1:/downcase}/}} | 第2个参数,自动转换第1个参数为小写 | 如果第1个参数是 Home,这里自动变成 home |
4. 示例:创建 Page
输入: stSimplePage + Tab
参数说明:
${1:Name}: 页面名称(如Home)${2:Title}: 页面标题(如首页)
操作步骤:
- 输入
Home→ 类名变成HomePage - 按
Tab，输入首页→ 标题变成首页
最终代码:
dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('首页'),
),
body: Container(),
);
}
}📋 可用代码片段
页面相关
| 前缀 | 说明 | 显示条件 |
|---|---|---|
stPage | Stateful Page (BasePage) | 启用 BasePage |
stSimplePage | Stateful Page (Simple) | 始终显示 |
lessPage | Stateless Page (Simple) | 始终显示 |
ViewModel
| 前缀 | 说明 | 显示条件 |
|---|---|---|
viewmodel | ViewModel (BaseViewModel) | 启用 BasePage |
组件相关
| 前缀 | 说明 | 显示条件 |
|---|---|---|
stWidget | Stateful Widget | 始终显示 |
lessWidget | Stateless Widget | 始终显示 |
stComponent | Stateful Component | 始终显示 |
component | Stateless Component | 始终显示 |
其他
| 前缀 | 说明 | 显示条件 |
|---|---|---|
service | Service 类 | 始终显示 |
model | Model 类 | 始终显示 |
🔄 与 v1 的区别
v1 (静态代码片段)
- ❌ 需要手动运行
flu-cli sync-snippets同步 - ❌ 所有代码片段始终显示，无法根据项目配置过滤
- ❌ 更新配置后需要重新同步
- ❌ 包含大量不常用的代码片段（如 Provider、GetX 特定片段）
v2 (动态代码片段)
- ✅ 自动激活，无需手动同步
- ✅ 根据项目配置智能显示适合的代码片段
- ✅ 配置更改后自动更新
- ✅ 精简到最常用的代码片段，保持简洁
🚫 已移除的代码片段
以下代码片段已从扩展中移除，不再支持：
providerPageconsumerselectorgetxPagegetxControllerlistPagelistViewModelsingletonfuturestream
原因：
- 这些代码片段过于特定，不适合所有项目
- 使用
flu-cli add命令生成更灵活 - 保持代码片段列表简洁，避免混淆
替代方案：
- 使用
flu-cli add page home生成页面 - 使用
flu-cli add service api生成服务 - 自定义 VSCode 代码片段（见下文）
🛠️ 自定义代码片段
如果需要自定义代码片段：
步骤 1：打开片段设置
- 打开命令面板（
Cmd+Shift+P/Ctrl+Shift+P） - 输入
Preferences: Configure User Snippets - 选择
dart.json
步骤 2：添加片段
json
{
"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 展开。
❓ 常见问题
Q1: 为什么我看不到某些代码片段？
A: 代码片段会根据项目配置动态显示。检查 .flu-cli.json 中的 withBasePage 设置：
withBasePage: true- 显示 BasePage 相关片段withBasePage: false- 隐藏 BasePage 相关片段
Q2: 如何查看所有可用的 snippets?
A: 在 .dart 文件中：
- 输入前缀(如
st) - 或按
Ctrl+Space(Windows/Linux) 或Cmd+Space(Mac) - 查看
Flu:开头的代码片段
Q3: 代码片段不生效怎么办？
A: 确保：
- 已安装 Flu CLI VSCode 扩展
- 在
.dart文件中使用 - 扩展已激活（打开 Dart 文件时自动激活）
- 尝试重启 VSCode
Q4: 如何禁用动态代码片段？
A: 如果不想使用动态代码片段，可以：
- 在 VSCode 设置中禁用 Flu CLI 扩展
- 或使用自定义代码片段替代
🔗 相关链接
更新时间: 2025-12-10
版本: v2.0
适用于: flu-cli VSCode Extension v2.x