编程技术

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

2022-5-27 1379字 399

作为一名前端程序猿,我们都需要写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. 实时模板变量
版权声明:Shire 发表于 2022-5-27
转载请注明: 借助IDE,统一规范console.log输出,并支持快捷键 | Shire

评论