Smart Console Log Helper
一个智能的 VS Code 插件，通过快捷键快速生成 console.log 语句，支持多光标、智能缩进、多行语句识别和插入高亮动画，让调试更高效。
特性
- 快捷键生成:
Ctrl+Shift+L (Win/Linux) / Cmd+Shift+L (Mac) 一键生成 console.log
- 一键清除:
Ctrl+Shift+D (Win/Linux) / Cmd+Shift+D (Mac) 删除当前文件所有插件生成的日志
- 多光标支持: 同时为多个光标位置生成 console.log，按行号降序插入避免偏移
- 四种输出格式: minimal / standard / detailed / custom，状态栏一键切换
- 智能变量检测: 自动获取光标下单词，支持属性访问 (
obj.prop)；无选中文本时读取剪贴板
- 变量名清理: 自动移除
const/let/var/export 前缀、解构语法、TypeScript 类型注解
- 智能缩进: 自动匹配代码上下文缩进，正确处理
if/for/switch/case 等嵌套结构
- 多行语句识别: 检测未闭合括号、链式调用 (
.then().catch())、对象字面量，在语句真正结束后插入
- 插入高亮: 新增行短暂高亮并以 cubic ease-out 曲线平滑淡出
- Emoji 前缀选择: 7 种 emoji 前缀可选，通过设置切换
安装
- 在 VS Code 中打开扩展面板 (
Ctrl+Shift+X / Cmd+Shift+X)
- 搜索 Smart Console Log Helper
- 点击安装
使用方法
插入 console.log
- 选中变量名（或将光标置于变量上）
- 按
Ctrl+Shift+L / Cmd+Shift+L
- 插件自动在合适位置生成 console.log
多光标
按住 Alt 点击多个变量 → 按快捷键 → 一次性为所有光标生成日志
剪贴板
光标不在任何单词上且无选中文本时，插件自动读取剪贴板内容作为变量名
删除所有日志
按 Ctrl+Shift+D / Cmd+Shift+D 一键删除当前文件中所有由插件生成的 console.log（通过 emoji 前缀识别）
切换格式
点击右下角状态栏的 SCL: Standard 或执行命令 Smart Console Log Helper: Switch Log Format
输出格式
Minimal
console.log(myVariable);
纯变量输出，无标签，快速调试用。
Standard（默认）
console.log('🐛 myVariable:', myVariable);
带 emoji 前缀和变量标签。
Detailed
console.log('🐛 [App.tsx:42] myVariable:', myVariable);
包含文件名和行号，适合多文件调试。
Custom
// 使用自定义模板，支持变量: ${variableName}, ${fileName}, ${lineNumber},
// ${functionName}, ${timestamp}, ${prefix}
console.log(`🐛 [14:30:05] [handleClick] [App.tsx:42] myVariable:`, myVariable);
配置项
| 配置项 |
类型 |
默认值 |
说明 |
smartConsoleLog.format |
enum |
standard |
日志格式: minimal / standard / detailed / custom |
smartConsoleLog.prefix |
enum |
🐛 |
日志前缀 emoji，可选: 🐛 📌 🔍 ⚡ 🚀 🎯 ❗ |
smartConsoleLog.insertAfterCurrentLine |
boolean |
true |
在当前行之后插入（false 则在光标位置插入） |
smartConsoleLog.enableVariableValidation |
boolean |
false |
启用变量名验证 |
smartConsoleLog.customTemplate |
string |
(见下方) |
自定义模板（format 为 custom 时生效） |
smartConsoleLog.enableHighlight |
boolean |
true |
插入后是否短暂高亮新行 |
自定义模板默认值
console.log(`${prefix} [${timestamp}] [${functionName}] [${fileName}:${lineNumber}] ${variableName}:`, ${variableName});
支持的模板变量: ${variableName}, ${fileName}, ${lineNumber}, ${functionName}, ${timestamp}, ${prefix}
配置示例
{
"smartConsoleLog.format": "detailed",
"smartConsoleLog.prefix": "🔍",
"smartConsoleLog.insertAfterCurrentLine": true,
"smartConsoleLog.enableHighlight": true
}
智能特性
智能缩进
- 代码块:
if/for/while/switch + { 结尾自动增加一层缩进
- 箭头函数:
=> 结尾自动增加缩进
- case/default 标签: 正确识别 case 块内的缩进层级
- 空行处理: 向上查找最近的非空行推断正确缩进
多行语句识别
- 以
, + && || ? : ( [ . 等结尾的行视为未完成语句
- 括号
() [] {} 不平衡时继续向下扫描
- 链式调用：下一行以
. 开头时自动延续到链尾
- 对象字面量
const x = { 不会在内部插入，而是在 } 之后
变量名清理
- 移除
const / let / var / export 前缀
- 提取解构赋值左值:
{ name } → name
- 去除 TypeScript 类型注解:
x: string → x
- 处理赋值表达式:
x = 1 → x
- 清理函数调用和数组索引
支持的语言
- JavaScript (
.js)
- TypeScript (
.ts)
- JavaScript React (
.jsx)
- TypeScript React (
.tsx)
- Vue (
.vue)
快捷键
| 快捷键 |
功能 |
Ctrl+Shift+L / Cmd+Shift+L |
插入 console.log |
Ctrl+Shift+D / Cmd+Shift+D |
删除所有插件生成的日志 |
命令
| 命令 |
说明 |
Smart Console Log Helper: Insert Smart Console Log Helper |
插入日志 |
Smart Console Log Helper: Delete All Smart Console Logs |
删除所有插件日志 |
Smart Console Log Helper: Switch Log Format |
切换日志格式 |
开发
git clone <repo-url>
cd smart-console-log
npm install
npm run compile # 编译 TypeScript
npm run watch # 监听模式
npm run lint # 代码检查
npm test # 运行测试
调试: 按 F5 启动扩展开发宿主，修改代码后 Cmd+R / Ctrl+R 重载窗口。
更新日志
详见 CHANGELOG.md。
贡献
欢迎提交 Issues 和 Pull Requests！
许可证
MIT License
