VSCodeでVue.jsを使うときにconsole.logをスマートに入力する方法

auです。

Vueを使って開発しているときに、値の確認で

console.log(変数名)

結構な頻度でconsole.logと打つので、自動保管があってもなんとなくめんどくさいなと思ってました。

Qiitaをみていると、ちょうど解決できる記事を見つけたので入れてみました。

qiita.com

使うのはVSCodeの拡張である「Turbo Console Log」です。

ダウンロード数も120000を超えているので人気なようです。

使い方

Macを使っているのでMacの利用のみ書きます。Windowsも問題なく使えるので使ってみてください。

変数を選択(クリックしながらドラッグして範囲指定) >option + control + L

const nodes = document.getElementById('target')
const height = window.getComputedStyle(nodes).height
const width = window.getComputedStyle(nodes).width
console.log("App -> width", width) // ここが追加される

追加されるコマンドは設定によって多少異なるそうです。
こういったものは基本的に「Shift, Command, Control+ 特定のキー」という場合がほとんどなので、これをうまく組み合わせてみてください。