VS Code Dart代码片段需求：自动生成文件夹导出文件

VS Code原生代码片段的变量系统无法直接读取文件夹内的文件列表——因为代码片段是静态模板，没有文件系统访问权限，所以没法通过纯代码片段实现自动批量生成导出语句。

1. 手动结合VS Code正则替换 #

操作步骤：

• 打开lib/ui/pages文件夹，全选所有.dart文件（排除pages.dart）
• 右键复制文件名（或相对路径），粘贴到pages.dart中
• 打开查找替换面板，勾选「正则表达式」：
  • 查找内容：^(.*)$
  • 替换内容：export 'package:你的项目名/ui/pages/$1';
• 点击全部替换，一键生成所有导出语句

2. Dart脚本自动生成 #

在项目根目录创建generate_exports.dart脚本，运行后自动生成导出文件：

import 'dart:io';

void main() {
  const targetDir = 'lib/ui/pages';
  const exportFile = 'lib/ui/pages/pages.dart';
  const projectName = '你的项目名'; // 替换为pubspec.yaml中的name字段

  final dir = Directory(targetDir);
  final dartFiles = dir.listSync().where((entity) {
    return entity is File && 
           entity.path.endsWith('.dart') && 
           !entity.path.endsWith('pages.dart');
  }).map((file) => file.path.split('/').last).toList();

  final exportContent = dartFiles
      .map((file) => "export 'package:$projectName/ui/pages/$file';")
      .join('\n');

  File(exportFile).writeAsStringSync(exportContent);
  print('导出文件已更新：$exportFile');
}

用法：在项目根目录执行dart run generate_exports.dart，还可以把这个命令加到pubspec.yaml的scripts字段中，方便一键调用。

3. VS Code插件辅助 #

安装Dart Export All插件，打开pages.dart后右键选择「Export All Files in Folder」，可自动生成当前文件夹下所有.dart文件的导出语句，还支持自定义导出路径格式（比如切换为package路径）。

以下片段可添加到VS Code的dart.json用户代码片段中（通过Ctrl+Shift+P → 「配置用户代码片段」→ 选择dart.json）：

1. 快速生成StatelessWidget #

{
  "Stateless Widget": {
    "prefix": "stless",
    "body": [
      "class ${1:WidgetName} extends StatelessWidget {",
      "  const ${1:WidgetName}({super.key});",
      "",
      "  @override",
      "  Widget build(BuildContext context) {",
      "    return Scaffold(",
      "      appBar: AppBar(title: const Text('${2:页面标题}')),",
      "      body: const Center(",
      "        child: Text('${3:页面内容}'),",
      "      ),",
      "    );",
      "  }",
      "}"
    ],
    "description": "快速生成带Scaffold的StatelessWidget"
  }
}

2. 快速生成StatefulWidget #

{
  "Stateful Widget": {
    "prefix": "stful",
    "body": [
      "class ${1:WidgetName} extends StatefulWidget {",
      "  const ${1:WidgetName}({super.key});",
      "",
      "  @override",
      "  State<${1:WidgetName}> createState() => _${1:WidgetName}State();",
      "}",
      "",
      "class _${1:WidgetName}State extends State<${1:WidgetName}> {",
      "  @override",
      "  Widget build(BuildContext context) {",
      "    return Scaffold(",
      "      appBar: AppBar(title: const Text('${2:页面标题}')),",
      "      body: const Center(",
      "        child: Text('${3:页面内容}'),",
      "      ),",
      "    );",
      "  }",
      "}"
    ],
    "description": "快速生成带Scaffold的StatefulWidget"
  }
}

3. 带状态判断的FutureBuilder #

{
  "FutureBuilder": {
    "prefix": "futurebuilder",
    "body": [
      "FutureBuilder<${1:数据类型}>(",
      "  future: ${2:异步方法()},",
      "  builder: (context, snapshot) {",
      "    if (snapshot.connectionState == ConnectionState.waiting) {",
      "      return const Center(child: CircularProgressIndicator());",
      "    } else if (snapshot.hasError) {",
      "      return Center(child: Text('请求失败：${snapshot.error}'));",
      "    } else if (!snapshot.hasData) {",
      "      return const Center(child: Text('暂无数据'));",
      "    } else {",
      "      final data = snapshot.data!;",
      "      return ${3:数据展示组件};",
      "    }",
      "  },",
      ")"
    ],
    "description": "快速生成完整状态判断的FutureBuilder"
  }
}

4. 快速生成TextStyle #

{
  "TextStyle": {
    "prefix": "textstyle",
    "body": [
      "const TextStyle(",
      "  fontSize: ${1:16},",
      "  fontWeight: FontWeight.${2:w500},",
      "  color: ${3:Colors.black87},",
      "  letterSpacing: ${4:0.5},",
      ")"
    ],
    "description": "快速生成可自定义的TextStyle"
  }
}

内容的提问来源于stack exchange，提问作者Iván López Justicia