VS Code 快速 console.log 插件
不知大家在使用 VS Code 开发过程中是否也遇见使用 snippet 快速生成 console.log 时没有对应变量名称的问题，不方便查看。遇见问题时看看是否已有 VS Code 插件来解决，安装使用后发现不大满意，后来自己实现一个了，可以直接给单个变量进行生成 console.log，同时多个连续变量可以通过选中来生成多行注释，还可以快速清除所有注释。
效果
const greet = "hello wrold"
console.log("greet:", greet)
const { length, state } = window.history
console.log("window.history:", window.history)
console.log("length:", length)
console.log("state:", state)
const { length: len, state: status } = window.history
console.log("len:", len)
console.log("status:", status)
const sum = (a, b) => {
console.log("a:", a)
console.log("b:", b)
return a + b
}
const twoSum = (a: number, b: number): number => {
console.log("a:", a)
console.log("b:", b)
return a + b
}
特性
- 未限制文件类型，可以在 js, ts, jsx, tsx, vue 等文件中使用；
- 单一变量直接使用快捷键生成，无需选中操作；
- 多个变量类似函数参数，解构赋值时选中后生成多行注释；
- 参数化配置控制以对象的形式打印，同时也可以配置无需打印变量名（此处感谢 Wxh16144 (红) improved debug console format · Issue #5 的建议）；
- 快速删除当前文件中所有未被注释的 console.log ；
- 快速对当前文件中所有 console.log 进行注释和非注释状态快速切换。
安装
在 VS Code 中搜索 Quick Console 进行安装，或者在 Visual Studio Code Marketplace 查看。
使用
打印生成
单个变量
- 移动光标至变量附近；
- 使用
Cmd + Shift + L(Mac) ,Ctrl + Shift + L(Windows) 快捷键； - 将会生成以下注释代码:
console.log('variable:', variable)
多个变量
- 选中需要进行注释的多个变量；
- 使用
Cmd + Shift + L(Mac) ,Ctrl + Shift + L(Windows) 快捷键； - 将会生成以下注释代码:
console.log('variable1:', variable1)
console.log('variable2:', variable2)
打印清除
使用 Cmd + Shift + K (Mac) , Ctrl + Shift + K (Windows) 快捷键，因为 C 按键和 Ctrl + Shift 同时在左手按键范围内，不方便使用，所以选择和 K 搭配使用。
打印注释切换
使用 Cmd + Shift + J (Mac) , Ctrl + Shift + J (Windows) 快捷键，因为 T 按键和 Ctrl + Shift 同时在左手按键范围内，不方便使用，所以选择和 J 搭配使用。
配置
consoleInObject
- Type:
Boolean - Default:
false
是否以对象的形式打印变量。
consoleVariablesName
- Type:
Boolean - Default:
true
是否打印变量名。
VIM 快捷键绑定
"vim.visualModeKeyBindingsNonRecursive": [
{
"before": ["<leader>", "l"],
"commands": [
"quickConsole.createConsoleLog",
"extension.vim_ctrl+["
]
},
{
"before": ["<leader>", "k"],
"commands": ["quickConsole.clearConsoleLog"]
},
{
"before": ["<leader>", "j"],
"commands": ["quickConsole.toggleConsoleLog"]
}
],
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["<leader>", "l"],
"commands": ["quickConsole.createConsoleLog"]
},
{
"before": ["<leader>", "k"],
"commands": ["quickConsole.clearConsoleLog"]
},
{
"before": ["<leader>", "j"],
"commands": ["quickConsole.toggleConsoleLog"]
}
]
✨ Happy hacking!
