VSCode 插件 - 一键插入/删除/注释 console.log，基于 AST 智能定位插入位置

Extensions for Visual Studio Code

功能特性

• 智能插入：选中变量后按 Ctrl+Alt+L，基于 AST 分析自动将 console.log 插入到最合适的位置（声明语句之后、return 之前等）
• 多语言支持：支持 JavaScript、TypeScript、JSX、TSX、Vue、HTML、Svelte、Astro（模板文件自动提取 <script> 块解析）
• 多选区批量插入：多光标选中多个变量，一次性插入多条 console.log
• 智能补块：单表达式箭头函数、无花括号的 if/for 等会自动补全块结构再插入；空块 {} 自动展开为多行
• 一键删除：Ctrl+Alt+D 删除文件中所有由模板生成的 console.log
• 一键注释/取消注释：Ctrl+Alt+C / Ctrl+Alt+U 批量注释或恢复，支持 // 与 /* */ 两种注释形式
• 模板自定义：console.log 参数格式完全可配置，支持前后缀、多变量组合
• Snippet 光标控制：模板支持 $1、${1:placeholder} 等 snippet 语法，插入后光标自动停在指定位置
• 剪贴板提取：插入后可按模板提取内容自动复制到剪贴板

安装

从 VSCode Marketplace 安装（推荐）

1. 打开 VSCode
2. 按 Ctrl+Shift+X 打开扩展面板
3. 搜索 "print-console-log"
4. 点击 Install 安装

使用说明

插入 console.log

1. 在编辑器中选中变量或表达式，如 userName
2. 按 Ctrl+Alt+L
3. 自动在合适位置插入：

const userName = getUser()
console.log(userName, `userName`)

插入位置由 AST 分析决定：

• 选中声明语句中的变量 → 插入到声明语句之后
• 选中 return 语句中的变量 → 插入到 return 之前
• 单表达式箭头函数 → 自动补全 {} 块并保留返回值
• 空块 {} → 自动展开为多行并插入块内
• 无法解析时 → 回退到选中行的下一行插入

删除 console.log

1. 按 Ctrl+Alt+D
2. 删除当前文件中所有匹配模板的 console.log 行

注释 / 取消注释 console.log

1. 按 Ctrl+Alt+C 批量注释所有匹配的 console.log
2. 按 Ctrl+Alt+U 恢复（支持 // ... 与 /* ... */ 两种形式）

快捷键

配置项

{
  // 启用插件功能
  "hiasConsoleLog.enable": true,

  // console.log 参数模板
  // 可用变量：${value}=选中文本, ${name}=原始文本, ${name:prefix,suffix}=带前后缀
  // 支持 snippet 语法：$1, $2, ${1:placeholder} 等控制光标位置
  "hiasConsoleLog.template": "${value}, `${name}`",

  // 插入后是否自动将匹配内容复制到剪贴板
  "hiasConsoleLog.copyToClipboard": false,

  // 剪贴板提取模板（与 template 相同的变量语法，额外支持 ${line}=完整语句）
  "hiasConsoleLog.clipboardPattern": ""
}

模板示例

"hiasConsoleLog.enable": true,
"hiasConsoleLog.template": "${value}$1, `${name:log_,}`$0",
"hiasConsoleLog.copyToClipboard": true,
"hiasConsoleLog.clipboardPattern": "${name:log_,}"

注意：删除/注释/取消注释按当前模板构建匹配规则，修改模板后旧格式的 console.log 将不再被匹配。

许可证

MIT License