VSCode折騰log外掛

mguy_1發表於2018-12-22

懷念青澀的我在半個月前發表的掘金第一篇文章

這兩天專案不算很忙，折騰了一下自己的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});`;

複製程式碼