还在手打console.log？快来试试这个vscode插件 Quickly Log！！

背景

作为一枚前端开发人员，尤其是在写业务代码的时候，避免不了需要经常在控制台打印变量来查看数据（反正我是这样哈哈哈哈哈），那么就需要频繁的来写console.log()，然后在里面再输入自己想要查看的变量名。

思考

既然我们需要频繁的来进行这个操作，那么我们是不是可以把它像代码片段一样来保存下来，然后配置一个激活他的快捷键来进行使用

在左下角这里选择用户代码片段

然后选择想要使代码片段生效的文件类型，比如我这里选择的tsx

选择了对应的文件类型，对应的代码片段只会在这个类型的文件里生效，想要在其他类型的文件里也使用同样的代码片段需要去对应的类型文件中复制一份

把对应的代码片段写入

"Print to console": {
    // 说明
    "description": "Log output to console",
    // 快捷键
    "prefix": "cl",
    // 输出内容
    "body": ["console.log($1)"]
},

这样我们就配置好了一个简易的代码片段，使用的时候只需要敲出来 ’cl‘就会出现我们的代码提示

这样我们就解决了这个问题（我自己也是使用这个方法很久）

更进一步

目前我们通过代码片段已经解决了这个问题，但是还是会有一些不方便的地方

• 我们只能在写好代码片段的类型文件中使用，我们现在使用 .tsx，突然要写 .vue 了使用的时候发现没有生效，就又要再去配置一次
• 如果我们目前的 console.log 比较多，那么控制台上就会看到输出了一堆的变量，根本搞不清哪个打印是对应的哪个变量
• 有时候会遗忘删掉 console.log 语句 (也可以通过配置husky，在commit的时候进行校验解决)

为了解决这些问题，我们更进一步，来通过写一个vscode插件解决

Quickly Log

这个插件最开始只是对vscode插件开发的好奇，加上自己确实有这方面的需求才开始编写的。编写成插件就可以有效的解决了需要重复配置代码片段的问题。

这里介绍下插件的功能，不对代码具体介绍，感兴趣的可以去github上看下代码 github.com/Richard-Zha…

功能

提示配置

只需要将光标移动到变量附近，然后使用快捷键 Cmd + Shift + L，就会在下一行输出语句

这里也支持携带上变量所在的行号以及文件名

当然这些都是可以配置的，可以根据自己的喜好来配置输出的提示内容

如果是简洁党也可全都取消勾选，效果就和直接使用上面提到的代码片段一样，但是会支持自动将变量放入console.log()的括号内

一键clear

执行 Cmd + Shift + K 就会将当前页面匹配到的console.log语句自动删除

一键切换注释

执行 Cmd + Shift + J 就会将当前页面匹配到的console.log语句前面自动打上注释，再执行就会取消注释

快捷键都是可以更改的 vscode左下角的设置icon点开 点击键盘快捷方式 输入 Quickly Log进行更改

以上就是目前插件支持的功能了，欢迎大家去Vscode下载使用

TODO

目前有些场景的打印是有问题的

比如下面这样的换行场景，我们希望在光标放在a，b，c这里的时候，会在第21行这里插入console.log语句，但是目前只会在光标的下一行插入，还需要手动移动到下面

之前有试过通过判断是否在 {} 内来输入到整个语句之后，但是情况不太理想，后续再考虑解决