VSCode折腾log插件

19,657 阅读3分钟

这两天项目不算很忙,折腾了一下自己的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安装

检查一下,按下快捷键,看是否正常显示


更新:修改快捷键在这里 ↓