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安裝

檢查一下，按下快捷鍵，看是否正常顯示

---

更新：修改快捷鍵在這裏 ↓