这两天项目不算很忙,折腾了一下自己的vscode插件,工欲善其事,必先利其器,也算小有收获
背景
在公司里多人合作写ts大型项目时,要么浏览器Sources里面加断点调试,要么就是简单的console.log()
或者console.table()
,前者适用于复杂的、异步的调试改bug,对于简单的只想控制台输出一下值,没必要打开对应ts文件,一行行找编译过的所在代码加断点(js文件会方便一点),这就是这篇小文的目的,log的更快更清晰
折腾过程
先安利一个vscode插件: javascript console utils ,一个精致小巧的插件,用起来很顺手
使用方法:
选中随意某个变量后,只要按下shift+command+L
,然后选中的下一行自动出现固定格式的log ,例如console.log('xxx:',xxx)
如果编辑器是AutoSave的话,热更新编译完成就可以在控制台看到结果了,真的很方便,比在编辑器添加用户代码片段来使用快捷指令的方式要快一些,😊
这个插件还提供一个快捷键shift+command+D
,一键删除本页面所有console.log,也很常用。
改进这个插件
但是还是有不满意的地方,不满意的地方在于多人协作的项目中,我们的控制台常常是这个样子的,😂
这样的log虽然意思很明确,但是控制台被一大堆信息铺满,自己的log被淹没在控制台各类信息当中,不是那么显眼,很难一眼定位到,这时候就想到加一点颜色等样式,显眼一点,就像终端里添加样式,五颜六色的查看node里面大段的graphql之类的肯定比黑底白字更舒服。 console也可以加样式,例如console.log('%cconfig: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',config);
console里面**%c**是占位符,只要把样式放在逗号后面就有样式了。
这时候我们想把这个插件改装一下,只需要简单四个步骤
第一步 下载
下载这个插件资源https://github.com/whtouche/vscode-js-console-utils
克隆到本地,npm install 跑一下,然后打开该项目
第二步 修改
这个插件的代码简洁清晰,找到它的主要代码逻辑extension.js,把extension.js第62行改一下,可以参考一下我的改动(想写什么炫酷的样式请随意) (增加一处内容)首先选取的text可能会有引号(对象的属性xxx['xxx']), 第一行做了兼容const str = `${text}`.replace(/\'|\"/g,'');
const logToInsert = `console.log('%c${str}: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',${text});`;
第三步 打包
全局安装vsce npm install vsce -g
(打包工具)
修改包的版本如0.8.0(原值0.7.0),如下图
使用命令vsce package
然后就会在代码当前的目录下打包生成一个vsix
第四步 安装
如果之前存在,要先卸载原有的javascript console utils插件,再从vscode安装
检查一下,按下快捷键,看是否正常显示更新:修改快捷键在这里 ↓