English | 中文
English
A VS Code extension for formatting Flutter console output, specifically designed to extract and beautify JSON response data.
Features
- 🚀 Automatically identify and extract JSON data from Flutter logs
- 📋 One-click copy formatted JSON to clipboard
- 🎨 Beautiful interface that supports VS Code themes
- 📝 Provides sample data for testing
- 🌐 Multi-language support (English/Chinese)
- ⚙️ Configurable markers and patterns
- 💡 Includes helper code for generating compatible logs
Usage
- Press
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the command palette
- Type
Flutter Log Formatter: Open Formatter and press Enter
- Paste your Flutter console output in the opened panel
- Click the "Format Logs" button
- The formatted JSON will be displayed below, click "Copy JSON" to copy to clipboard
Method 2: Using Sample Data
- Open the formatter panel
- Click the "Load Sample Data" button to load sample data
- Click "Format Logs" to see the effect
Method 3: Configuration Settings
- Open VS Code settings and search for "Flutter Log Formatter"
- Configure custom start marker, end marker, and path pattern
- The extension will use your custom configuration to parse logs
The extension recognizes the following log formats:
Standard Flutter logs:
flutter: path:/app/v3/my/service/detail/get
flutter: 🚀🚀🚀response start🚀🚀🚀
flutter: {"jsonrpc":"2.0","id":123...
flutter: ......
flutter: ... age":12 }
flutter: 🚀🚀🚀response end🚀🚀🚀
Android Flutter logs:
I/flutter (1626): path:/app/v3/my/service/detail/get
I/flutter (1626): 🚀🚀🚀response start🚀🚀🚀
I/flutter (1626): {"jsonrpc":"2.0","id":123...
I/flutter (1626): ......
I/flutter (1626): ... age":12 }
I/flutter (1626): 🚀🚀🚀response end🚀🚀🚀
How to Generate Compatible Logs
To generate logs that work with this extension, add the following helper method to your Flutter/Dart project:
Step 1: Create a Helper Method
import 'console_tool.dart' as ct;
static void longPrint(String msg) {
int maxStrLength = 500;
while (msg.length > maxStrLength) {
ct.debugPrint(msg.substring(0, maxStrLength));
msg = msg.substring(maxStrLength);
}
ct.debugPrint(msg);
}
Step 2: Use the Helper Method
In your HTTP request handling code, wrap your response logging like this:
// Example usage in your API call
longPrint("path:$path");
longPrint("🚀🚀🚀response start🚀🚀🚀");
longPrint("$response");
longPrint("🚀🚀🚀response end🚀🚀🚀");
This will generate logs that are perfectly compatible with the Flutter Log Formatter extension.
How It Works
- Scan the input text for start markers (configurable)
- Collect all Flutter log lines between start and end markers
- Remove the
flutter: or I/flutter (xxxx): prefix from each line
- Merge multiple lines into a complete JSON string
- Format and display the result
- Optionally extract path information for API route detection
Commands
Flutter Log Formatter: Open Formatter - Open the main formatting panelFlutter Log Formatter: Start Monitoring - Start terminal monitoring (limited support)Flutter Log Formatter: Stop Monitoring - Stop terminal monitoring
Configuration
You can customize the extension behavior in VS Code settings:
- Start Marker: The marker that indicates the beginning of a response block
- End Marker: The marker that indicates the end of a response block
- Path Pattern: Regular expression pattern to extract API path information
Notes
- Due to VS Code API limitations, direct terminal output monitoring is limited
- Manual paste method is recommended for processing logs
- If you're using Flutter debugging, you can copy logs from the debug console
Development Requirements
- VS Code 1.102.0 or higher
- Node.js (for development)
Contributing
Issues and Pull Requests are welcome!
License
MIT
中文
一个用于格式化 Flutter 控制台输出的 VS Code 扩展，专门用于提取和美化 JSON 响应数据。
功能特点
- 🚀 自动识别并提取 Flutter 日志中的 JSON 数据
- 📋 一键复制格式化后的 JSON 到剪贴板
- 🎨 支持 VS Code 主题的美观界面
- 📝 提供示例数据用于测试
- 🌐 多语言支持（中文/英文）
- ⚙️ 可配置的标记和模式
- 💡 包含生成兼容日志的辅助代码
使用方法
方法 1: 手动输入（推荐）
- 按
Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac) 打开命令面板
- 输入
Flutter Log Formatter: Open Formatter 并回车
- 在打开的面板中粘贴你的 Flutter 控制台输出
- 点击 "Format Logs" 按钮
- 格式化后的 JSON 将显示在下方，点击 "Copy JSON" 可复制到剪贴板
方法 2: 使用示例数据
- 打开格式化面板
- 点击 "Load Sample Data" 按钮加载示例数据
- 点击 "Format Logs" 查看效果
方法 3: 配置设置
- 打开 VS Code 设置并搜索 "Flutter Log Formatter"
- 配置自定义的开始标记、结束标记和路径模式
- 扩展将使用你的自定义配置来解析日志
支持的日志格式
扩展会识别以下格式的日志：
标准 Flutter 日志：
flutter: path:/app/my/todo/list
flutter: 🚀🚀🚀response start🚀🚀🚀
flutter: {"jsonrpc":"2.0","id":123...
flutter: ......
flutter: ... age":12 }
flutter: 🚀🚀🚀response end🚀🚀🚀
Android Flutter 日志：
I/flutter (1626): path:/app/my/todo/list
I/flutter (1626): 🚀🚀🚀response start🚀🚀🚀
I/flutter (1626): {"jsonrpc":"2.0","id":123...
I/flutter (1626): ......
I/flutter (1626): ... age":12 }
I/flutter (1626): 🚀🚀🚀response end🚀🚀🚀
如何生成兼容的日志
要生成与此扩展兼容的日志，请在您的 Flutter/Dart 项目中添加以下辅助方法：
步骤 1: 创建辅助方法
import 'console_tool.dart' as ct;
static void longPrint(String msg) {
int maxStrLength = 500;
while (msg.length > maxStrLength) {
ct.debugPrint(msg.substring(0, maxStrLength));
msg = msg.substring(maxStrLength);
}
ct.debugPrint(msg);
}
步骤 2: 使用辅助方法
在您的 HTTP 请求处理代码中，像这样包装您的响应日志记录：
// API 调用中的使用示例
longPrint("path:$path");
longPrint("🚀🚀🚀response start🚀🚀🚀");
longPrint("$response");
longPrint("🚀🚀🚀response end🚀🚀🚀");
这将生成与 Flutter Log Formatter 扩展完全兼容的日志。
工作原理
- 扫描输入文本，查找开始标记（可配置）
- 收集开始和结束标记之间的所有 Flutter 日志行
- 移除每行的
flutter: 或 I/flutter (xxxx): 前缀
- 将多行合并为完整的 JSON 字符串
- 格式化并显示结果
- 可选择提取路径信息用于 API 路由检测
命令列表
Flutter Log Formatter: Open Formatter - 打开主要的格式化面板Flutter Log Formatter: Start Monitoring - 启动终端监听（有限支持）Flutter Log Formatter: Stop Monitoring - 停止终端监听
配置选项
你可以在 VS Code 设置中自定义扩展行为：
- 开始标记: 指示响应块开始的标记
- 结束标记: 指示响应块结束的标记
- 路径模式: 用于提取 API 路径信息的正则表达式模式
注意事项
- 由于 VS Code API 的限制，直接监听终端输出功能有限
- 推荐使用手动粘贴的方式来处理日志
- 如果你在使用 Flutter 调试，可以从调试控制台复制日志
开发环境要求
- VS Code 1.102.0 或更高版本
- Node.js (用于开发)
贡献
欢迎提交 Issue 和 Pull Request！
许可证
MIT
