借助IDE，统一规范console.log输出，并支持快捷键

作为一名前端程序猿，我们都需要写console.log()来调试代码，但随着代码量的不断增多，日志变的杂乱无章，在组员过多情况下，如果没有一个规范化的log打印，想找出关键信息变得十分困难。

思路

针对规范化，我们我们有以下几点需求

1. 显示文件名、方法名、当前需要打印的变量名，以及变量
2. 支持vue、js、ts、jsx等格式
3. 支持快捷键或者Tab输出
4. 最好能IDE集成，不使用插件

针对上面几点需求整理出来的格式：

//console.log('[文件名]>>方法名>>变量名:', 变量)
console.log('[test]>>exportName>>myName:', myName)

这么一段文本，每次手打可就费劲了，心情好，还能输出一波，心情不好可就没那心思敲这么多了，何况还费手，如何一键生成呢，就需要用到，当然是Webstorm自带的live-template

实现

打开Webstorm ---> File ---> Setting ---> Editor ---> Live Templates ---> Javascript

创建live-template

点右边+号，在下方Abbreviation输入conl ，在下方Description输入控制台输出

在下方Temaplate text输入

console.log('[$fileNameWithoutExtension$]>>$jsMethodName$>>$clipboard$:', $clipboard$)

点击最下方有个蓝色的Define，按图所示都勾选上

创建变量

创建变量文件名： fileNameWithoutExtension 勾选 fileNameWithoutExtension()
创建变量函数名：jsMethodName 勾选 jsMethodName()
创建变量剪贴板文本： clipboard 勾选 clipboard()

使用

1. 先copy要打印的字符串或者变量，
2. 输入conl后回车，会自动打印出统一的console.log

参考

1. 实时模板变量