Kwai-Log - Visual Studio Code 扩展

专为快手（Kwai）项目打造的智能日志管理工具，提供标准化的日志操作流程和可视化统计能力。

✨ 最新更新 (v0.0.11)

🎯 新增快捷键打印日志功能：全新的文本选择打印体验

• ⌨️ 新增快捷键：光标选中文本后使用 ctrl+shift+k 快速插入日志
• 🔧 支持配置：可配置日志前缀、分隔符、序列化等选项
• 📝 智能模板：支持固定结构和自定义模板两种日志格式
• 🌏 中文优化：选中文本包含中文时自动使用固定配置结构
• 🐛 问题修复：彻底解决日志分组错乱和函数名冲突问题

功能特性

📝 快速插入标准化日志

• klog：插入本地调试日志（默认分组：LogGroup: default）
• klogn：
  • 移动端模式：插入客户端日志（默认分组：NativeGroup: default，优先级：P3）
  • PC 端模式：插入 Log.i 日志，自动处理导入和 logTag 定义
• klogr：插入雷达日志（默认分组：RadarGroup: default，优先级：P3）
• 自动生成标准格式：[函数名][优先级][调用时间][调用文件地址][日志类型标识][符号] <message>

⌨️ 快捷键打印日志

• ctrl+shift+k：光标选中文本后快速插入日志
• 智能配置支持：
  • 可配置日志前缀、分隔符、是否序列化
  • 支持自定义日志模板和固定结构两种模式
  • 选中文本包含中文时自动使用固定配置结构
• 生成的日志结构：
  • 固定结构：console.log('${timeText}${filePathText}${lineNumberText}${prefix}${delimiter} ${selectedText}: ', ${selectedText})
  • 自定义模板：console.log('【${time}】【${filePath}】【${lineNumber}】${delimiter} ${selectedText}', ${selectedText});

🛠️ 智能日志管理

• 右键菜单支持：
  • 🗑️ 一键注释/取消注释日志
  • ⚡ 快速删除指定日志语句
  • 🔍 定位日志上下文
• 智能检测：自动识别日志类型并应用对应规则

🎨 完美主题兼容

• 多主题支持：完美适配 VSCode 的浅色、深色和高对比度主题
• 动态颜色适应：所有文字、边框、背景色都会根据当前主题自动调整
• 一致性保证：确保在任何主题下都有良好的可读性和视觉效果

📊 可视化侧边面板

• 实时统计：展示当前统计路径下的日志分布
  • 按类型（调试/客户端/雷达）分类统计
  • 按优先级分组显示
• 智能工作区管理：
  • 🔄 支持多工作区环境，切换工作区时自动更新数据
  • 📡 实时响应工作区变化，无需手动刷新
  • 🌐 内置 Web 服务器自动适配可用端口（8080、8081、8082...）
• 快捷操作：
  • 🎯 点击日志条目快速跳转到代码位置
  • ⚙️ 动态修改配置参数：
    • 设备模式设置（移动端/PC 端）
    • 客户端日志函数名（默认：logRecovery）
    • 雷达日志函数名（默认：weblogger.radarEvent）
    • 统计路径配置
    • 优先级映射关系

🚀 快速开始

安装

1. 打开 VS Code 扩展商店
2. 搜索 "kwai-log"
3. 点击安装按钮

基本使用

1. 插入日志：

   - 在编辑器中输入命令前缀后按 `Tab` 键：
       - `klog` → 调试日志
       - `klogn` → 根据设备模式插入客户端日志或Log.i日志
       - `klogr` → 雷达日志
   - 示例输出：`// LogGroup: insert-plugin
   

   console.log( '【17:2:40】【insert-plugin/index.ts】😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀', );`

2. 快捷键插入日志：

   - 选中变量/文本后按 `ctrl+shift+k`
   - 支持配置项：
       - 日志前缀、分隔符
       - 是否显示时间、文件路径、行号
       - 是否序列化变量（JSON.stringify）
       - 自定义日志模板
   - 示例输出：`console.log('【14:30:15】【src/App.tsx】【行号25】🍓🍓🍓 data', data);`
   

3. 管理日志：

   • 右键点击日志语句 → 选择操作：
     • "注释 console.log"（注释/取消注释）
     • "删除 console.log"（删除日志）

4. 设备模式设置:

   • 在侧边栏的设置面板中可选择"移动端模式"或"PC 端模式"
   • 移动端模式下：
     • 客户端日志方法名默认为"logRecovery"
     • klogn 命令插入标准的客户端日志
   • PC 端模式下：
     • 客户端日志方法名自动设置为"Log.i"
     • klogn 命令智能插入 Log.i 日志，自动添加导入、logTag 定义和日志语句

5. 侧边栏操作：

   • 点击状态栏图标打开日志面板
   • 修改配置 → 自动刷新统计结果
   • 点击统计条目跳转到对应代码位置

📸 界面预览

侧边栏统计面板

实时日志统计与快速跳转功能

快速插入演示

通过命令快速插入标准化日志

❓ 常见问题

Q：为什么命令不生效？
A：请确保：

1. 文件类型在支持列表中（.js/.ts/.vue/.jsx/.tsx）
2. 未处于只读模式

Q：快捷键 ctrl+shift+k 不生效怎么办？
A：请检查：

1. 是否选中了文本（必须先选中变量或文本）
2. 快捷键是否与其他插件冲突，可在 VSCode 设置中修改快捷键
3. 确保文件类型在支持列表中
4. 可在扩展设置中配置日志模板和其他选项

Q：如何修改统计路径？
A：侧边栏顶部输入框 → 输入新路径 → 按 Enter 确认

Q：在白色主题下看不清文字怎么办？
A：从 v0.0.7 版本开始，插件已完美支持所有 VSCode 主题。如果仍有显示问题：

1. 重启 VSCode 确保样式生效
2. 检查是否为最新版本
3. 如问题持续，请提交 Issue 并附上主题名称

Q：不同设备模式下命令的行为有什么区别？
A：

• klog 命令在任何模式下都插入 console.log 调试日志
• klogr 命令在任何模式下都插入雷达日志
• klogn 命令在移动端模式下插入 logRecovery 客户端日志，在 PC 端模式下插入 Log.i 日志

Q：PC 端模式下的 klogn 具体会做什么？
A：会自动：

1. 检查并添加import { Log } from '@common/utils/log'（Vue 文件在<script>标签后插入）
2. 检查并添加const logTag = Log.makeTag('文件名')在 import 语句后（对于*module.ts 文件，不会添加此行）
3. 在光标位置插入Log.i(logTag, )日志，并将光标定位在逗号后（对于*module.ts 文件，使用this.logTag而非logTag）

Q：切换工作区后数据没有更新怎么办？
A：从 v0.0.8 版本开始，插件已支持智能工作区管理。从 v0.0.10 版本开始，插件已彻底修复日志分组错乱问题：

1. 工作区切换会自动触发数据更新，无需手动操作
2. 如果遇到更新延迟，请等待几秒钟让系统完成同步
3. 确保使用最新版本以获得最佳体验

Q：Web 服务器端口被占用怎么办？
A：插件会自动处理端口冲突：

1. 默认尝试使用 8080 端口
2. 如果被占用，会自动尝试 8081、8082 等端口
3. Web 页面会自动适配实际使用的端口，无需手动配置

🤝 参与贡献

欢迎提交 Issue 和 PR：
GitHub Repository

许可证

MIT License © 2023 zhuhong07