VSCode折腾log插件

怀念青涩的我在半个月前发表的掘金第一篇文章

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

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

---

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

第一次在掘金上写文章，多多关照!