Quick Create log

English | 中文

Why

调试时经常需要输入 log 生成 console.log('|', |) 的代码片段然后输入需要打印的内容。这太麻烦了！

在 vscode 搜索 vs-quick-log 或 Quick Create log 安装此扩展，让它直接帮你创建不香吗？

目前已有的同类型扩展大多需要光标移动到声明变量附近, 这里的优势是光标在当前行或者下一行就能自己识别打印, 不需要刻意移动光标或者用鼠标去点一下

Features

使用时将光标移动至打印目标所在行(或打印目标的下一行)

• Ctrl + Shift + L 创建 console.log
  • ✨ 可打印 if 语句中的条件判断
  • ✨ 可打印函数参数
  • ✨ 可打印变量
• Ctrl + Shift + DELETE 删除该插件创建的 console.log

支持 ts tsx js jsx html vue(vue2 & vue3) 等文件内使用。🍺enjoying!

Options

• printPath

  • type: string
  • default: none
  • enum: ['none', 'filename', 'fullpath']

  // none
  console.log("======= foo =======\n", foo); // A.ts
  console.log("======= foo =======\n", foo); // B.ts
  // filename
  console.log("======= foo ( A.ts ) =======\n", foo); // A.ts
  console.log("======= foo ( B.ts ) =======\n", foo); // B.ts
  // fullpath
  console.log("======= foo ( /src/components/A.ts ) =======\n", foo); // A.ts
  console.log("======= foo ( /src/components/B.ts ) =======\n", foo); // B.ts

Mac

mac 使用 cmd

• Cmd + Shift + L 创建 console.log
• Cmd + Shift + DELETE 删除该插件创建的 console.log

More

• 需要打印 obj.xx.xx 这种变量, 需要先选中内容然后使用打印命令
• 打印大批量的 console.log 可以选中所有需要打印的行然后使用打印命令

FAQ

1. 当前行同时存在变量和参数只创建了参数的 console.log ？

   这是刻意为之, 如果同一行代码同时存在变量和参数大概率该行是一个函数表达式, 这种情况我们一般需要调试的是参数而不是函数

   const fn = (a, b) => {
     // 这里一般需要打印的是 a, b 而不是 fn
   };

欢迎 issue & pr

License

MIT