懷念青澀的我在半個月前發表的掘金第一篇文章
這兩天專案不算很忙,折騰了一下自己的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,也很常用。
改進這個外掛
但是還是有不滿意的地方,不滿意的地方在於多人協作的專案中,我們的控制檯常常是這個樣子的,?

console.log('%cconfig: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',config);
console裡面**%c**是佔位符,只要把樣式放在逗號後面就有樣式了。
這時候我們想把這個外掛改裝一下,只需要簡單四個步驟
第一步 下載
下載這個外掛資源https://github.com/whtouche/vscode-js-console-utils
克隆到本地,npm install 跑一下,然後開啟該專案
第二步 修改

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



更新:修改快捷鍵在這裡 ↓
