推荐使用 Turbo Console Log 扩展实现快速插入带变量名的 console.log 语句:安装后通过 Cmd+Alt+L 快捷键自动生成如 console.log('userProfile:', userProfile); 的日志,支持自定义模板与多光标批量插入。

如果您在使用 VSCode 进行开发时希望快速插入带上下文信息的 console.log 语句,但每次手动编写又耗时易错,则可能是由于缺乏高效日志注入机制。以下是实现简化日志输出的多种方法:
本文运行环境:MacBook Pro,macOS Sequoia。
一、安装并启用 Turbo Console Log 扩展
该扩展通过快捷键自动将选中文本或光标所在变量封装为含变量名的 console.log 输出,避免手写冗余代码。
1、打开 VSCode 的扩展市场(快捷键 Cmd+Shift+X)。
2、在搜索框中输入 Turbo Console Log 并选择由 Chakroun Anas 发布的官方扩展。
3、点击“安装”,安装完成后重启 VSCode 或点击“重新加载”按钮激活扩展。
4、确认扩展已启用:在任意 JavaScript 或 TypeScript 文件中右键,检查是否出现 Log the selected text/variable 选项。
二、使用默认快捷键快速插入日志
扩展预设了平台适配的快捷键组合,可直接触发带变量名的日志语句生成,无需鼠标操作。
1、在编辑器中将光标置于变量名上(例如 userProfile),或选中该标识符。
2、按下快捷键 Cmd+Alt+L(macOS)或 Ctrl+Alt+L(Windows/Linux)。
3、编辑器将在当前行下方自动生成类似 console.log('userProfile:', userProfile); 的语句。
三、自定义快捷键与日志模板
可通过修改 VSCode 键盘快捷方式和设置 JSON 配置,适配团队命名规范或添加时间戳等元信息。
1、进入 VSCode 设置(Cmd+,),切换至“键盘快捷方式”标签页。
2、搜索 turboConsoleLog,右键点击对应命令选择“更改键绑定”。
3、按下新组合键(如 Cmd+Shift+L)完成绑定。
4、打开设置 JSON(Cmd+Shift+P → “Preferences: Open Settings (JSON)”),添加如下配置:
"turboConsoleLog.logTemplate": "console.log('[${date}][${time}] ${name}:', ${name});"
四、配合多光标批量生成日志
利用 VSCode 原生多光标功能,可在多个变量位置同步触发 Turbo Console Log,提升调试效率。
1、按住 Option 键(macOS)并逐次点击多个变量名起始位置,或使用 Cmd+D 逐个扩展选中相同变量名。
2、确保所有光标均落在合法标识符内部(非字符串、注释或关键字中)。
3、执行已绑定的 Turbo Console Log 快捷键,每个光标位置将独立生成对应变量的日志语句。










