初入前端之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)

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

如果编辑器是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

第四步 安装

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

如果之前存在，要先卸载原有的javascript console utils插件，再从vscode安装

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

---

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

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