console.logのコピペがめんどくさい

JavaScript/TypeScriptで開発していると、console.logの使用は避けて通れません。
適宜console.logをコピペして中の変数書き換えて、どこのconsole.logか分かるように文字列で名前を記述したり...とても面倒くさいとモヤモヤしておりました。
スニペットの拡張機能入れてconsole.log()は補完してくれますが、中身書くのがめんどくさい。。。

そんな時にショートカットコマンド一発でconsole.logできるVSCodeの拡張機能を見つけました。

Turbo Consolo Log

「Turbo Console Log」という拡張機能です。
VSCodeの拡張機能Marketplaceから検索。
これです。設定とかは不要でインストールするだけ。

使い方

使い方は簡単で

• console.log対象の変数を選択
• ショッtーカットコマンドを入力
• (Mac) shift + option + L 　(フォーマッターを入れている場合上記コマンドと被るのでcontrol + option + Lの場合あり)
• (Windows) ctrl + alt + L

どこの変数なのかプレフィックスまでつけてくれます。

その他のショートカット

※Macでフォーマッターを入れている場合control + option + ~の場合あり

• (Mac): Option + Shift + C / (Win): ctrl + alt + C

拡張機能で出力した全部のconsole.logをコメントアウト

• (Mac): Option + Shift + U / (Win): ctrl + alt + U

拡張機能で出力した全部の出力したすべてのconsole.logのコメントアウトを削除

• (Mac): Option + Shift + D / (Win): ctrl + alt + D

拡張機能で出力した全部の出力したすべてのconsole.logを削除

細かな設定

拡張機能の設定画面から
console.log末尾のセミコロンの有無や、シングルクオート/ダブルクオートの選択
プレフィックスのルール設定ができるので自分の好みに合わせて設定できます。

地味だけど使い始めると快適な拡張機能のご紹介でした。
最後まで読んで頂きありがとうございました。