【VSCode】turbo console log でデバッグ作業を効率化しよう

読んでほしい人

• JSやTSを使用して日々開発を行っている方
• デバッグ作業をより効率的に行いたい方

turbo console logとは？

turbo console logは、Visual Studio Code（以下、VSCode）の拡張機能で、コード内に簡単にコンソールログを挿入・削除することができるツールです。この拡張機能を使用することで、デバッグ時に必要なログの管理が格段に効率化されます。

https://www.turboconsolelog.io/home

主な機能

• ワンクリックでログの挿入
  • 選択したコード行に対して、ショートカットキー一つでconsole.logを自動挿入。
  • ショートカットキー
    • Mac: Ctrl + option + L
    • Windows: Ctrl + Alt + L
• ログのテンプレートカスタマイズ

  • デフォルトのログ形式をプロジェクトに合わせてカスタマイズ可能。

    私はお寿司が好きです。なので、ログを出すときもお寿司を出します（？）

    console.log("🍣 ~ file: CalculateTotalPrice.tsx:16 ~ subtotal:", subtotal);
    

インストール方法

以下をVSCodeにインストールする

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

カスタマイズ方法

1. VSCode > マーケットプレイスで「turbo」と検索

2. 歯車マークを押し、拡張機能の設定を開く

   

3. セミコロンを付与するか？行番号を入れるか？Prefixは何を表示するか？などの設定ができる。

   

設定項目の詳細は公式ドキュメントに乗っています。

https://www.turboconsolelog.io/documentation?activeSection=settings&activeSubSection=custom-prefix

使い方の基本

1. ログを挿入したい行にカーソルを合わせる。
2. ショートカットキー（デフォルトではCtrl + option + L ）を押す。
3. 自動でconsole.logが挿入され、変数名や関数名が自動補完される。

function calculateTotalPrice(
  items: { name: string; price: number }[],
  taxRate: number
): number {
  const subtotal = items.reduce((total, item) => total + item.price, 0);
  console.log("🍣 ~ file: CalculateTotalPrice.tsx:16 ~ subtotal:", subtotal);

  const tax = subtotal * taxRate;
  console.log("🍣 ~ file: CalculateTotalPrice.tsx:19 ~ tax:", tax);

  const totalPrice = subtotal + tax;
  console.log("🍣 ~ file: CalculateTotalPrice.tsx:22 ~ totalPrice:", totalPrice);

  return totalPrice;
}

まとめ

turbo console logは、VSCodeにおけるデバッグ作業を大幅に効率化する強力なツールです。手動でのログ挿入に伴う時間的・心理的負担を軽減し、開発者が本来の開発業務に集中できる環境を提供します。特に、大規模なプロジェクトや頻繁にデバッグを行う開発者にとって、この拡張機能は必須と言えるかと思います。効率的な開発環境を整えるために、ぜひ一度試してみてください。

参考サイト

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log