【VSCode】便利なショートカット集 HTML編!

投稿者: | 2020年12月19日
vscodeアイコン

VSCodeバージョン:1.52.0

 

本日はVSCodeのHTML作成時に実践で使えて作業スピードが大幅に上がる便利なショートカットをご紹介していきたいと思います。

たくさんあるので今回は私自身が実際に使用している、特に便利なものだけを厳選して13個ピックアップしてみたので参考にしてみてください(*^^)v

それではいってみましょう!

 

ショートカット13選

初期HTMLを作成

!+ Enter

一発でひな型のHTMLを作成してくれるので楽チンです\(^^)/

html

 

liタグ作成

ul>li

ulliタグ

更に次のコピーを使えばliタグ5個が5秒で完成します。

 

行コピー

Shift + Alt + 上下

行コピー

 

回数選択

Ctrl + D

押した回数分、選択してくれます。

回数選択

 

一括選択

Ctrl + Shift + L

同じ文字を全選択してくれます。

一括選択

 

上下一括選択

Ctrl + Alt + 上下

特殊選択

 

行移動

Alt + 上下

行を移動

 

div classを作成

div.test → <div class = “test”></div>

divClass

 

div idを作成

div#aaa → <div id=”aaa”></div>

 

下に空白行を作成

Ctrl + Enter

 

上に空白行を作成

Ctrl + Shift + Enter

 

コメントアウト

Ctrl + /

 

インデントを一括調整

Shift + Alt + F 

 

 

まとめ

非常に使い勝手のいいVSCodeですがショートカットも豊富で軽快に動作するので重宝できます。

今回ご紹介したショートカットを使用して作業効率がグーンっと上げてもらえたら幸いです(*^^)v

以上です!