VS Code 擴充推薦 - Turbo Console Log

你是否對於經常打 console.log() 感到厭煩？是不是想擺脫這種枯燥乏味的 console.log() 人生？

試試 Turbo Console Log 吧！

本文環境 #

• macOS
• VS Code
• Turbo Console Log

Turbo Console Log 介紹 #

Turbo Console Log 是 1 個 VS Code 擴充，讓 JavaScript/TypeScript 開發者可以更輕鬆地用 console.log() 進行除錯，只要透過點選加上快捷鍵(shortcuts)就可以自動新增一行 console.log('🚀' + 變數名稱 + 變數值) ，把感興趣的變數名稱與值列印出來，連打字的時間都省下！

p.s. 如果是 Windows 環境，請將本文快捷鍵 Option 改為 Alt

新增 console.log() 快捷鍵 (Ctrl + Option + L) #

以下列 TypeScript 程式碼為例：

const getWeekNumber = (t: Date): number => {
  const s = new Date(t.getFullYear(), 0, 1);
  const days = Math.floor((t.getTime() - s.getTime()) / (24 * 60 * 60 * 1000));
  return Math.ceil(days / 7);
};

export { getWeekNumber };

如果我們對 days 感興趣，只要將游標放在 days , 並且按下快捷鍵 Ctrl + Option + L 就會在 days 自動新增 1 行 console.log() :

速記法： l 等於 log

註解所有 Turbo Console Log 的 console.log() 快捷鍵 (Shift + Option + C) #

如果你希望註解掉所有由 Turbo Console Log 所新增的 console.log() , 可以按下快捷鍵 Shift + Option + C :

上圖可以看到第 3 行的 console.log(s); 並沒有被註解，這是因為它的格式不是 Turbo Console Log 的格式，所以不會被註解。

速記法： c 等於 comment

取消所有 Turbo Console Log 的註解快捷鍵 (Shift + Option + u) #

註解之後，還是可以取消註解，只要按下快捷鍵 Shift + Option + u 即可。

速記法： u 等於 undo

刪除所有 Turbo Console Log 的 console.log() 快捷鍵 (Shift + Option + d) #

如果要一次刪除所有 Turbo Console Log 的 console.log() 只要按下快捷鍵 Shift + Option + d 即可，相當適合用在除錯結束之後的清理。

速記法： d 等於 delete

列出所有 Turbo Console Log 的快捷鍵清單 #

如果想列出所有 Turbo Console Log 的快捷鍵，可以叫出 Command Palette (快捷鍵 Shift + Command + P )，輸入 open keyboard shortcuts 後選擇 Preferences: Open Keyboard Shortcuts 後，再搜尋 turbo console log 即可：

修改設定 #

Turbo Console Log 也有提供變更設定的彈性，包含改掉 log 訊息的前綴(prefix)字串（預設是火箭的 emoji ），或者換掉 log 的函式等等，各位可以按照需求進行調整，詳見 Documentation 。

總結 #

Turbo Console Log 是個不錯的 VS Code 擴充，對於 TypeScript/JavaScript 開發者來說相當輕巧便利，不過目前也只支援 TypeScript/JavaScript, 如果你常用的語言不是 TypeScript/JavaScript 就得尋找替代方案。

以上！

Enjoy!

References #

Turbo Console Log - Home Page

Turbo Console Log - Visual Studio Marketplace

vscode