【VSCode】HTMLを使うならラップ変換(タグで囲む)を使おう！

概要

たくみですこんにちは。

皆さん、楽しいWeb開発ライフを送れていますか？
僕は年末でも楽しく開発しています！！！！

HTMLを使用している際にラップ変換を良く使用するのですが、もしかしたらあんまり知られていない気がしたので記事にまとめておきます。

ラップ変換とは

皆さんは、HTMLを使用している際に「この文章全部pタグで囲みたいな...」や「この要素全部divで囲みたいな...」などを思ったことはありませんか？

もちろんありますよね！

その悩みを解決してくれる機能がラップ変換です！
選択範囲を任意のタグで囲ってくれるEmmetの機能です！

使用方法

1. 任意の文章を選択する。
   
2. Ctrl + Shift + Pを押してラップ変換を選択。
   
3. 囲みたいタグを入力する(Emmet表記可)。
   
4. Enterを押すと囲まれます！
   

え？こんなに長い工程なら、Alt+↑↓で移動させた方が楽？？

確かに、毎回毎回ラップ変換って入力して選択して、、って面倒ですよね。
てことで皆さん大好きなショートカットキーを設定しましょう！

ショートカットキー

1. ファイル→ユーザー設定→キーボードショートカットから
   ショートカットキーのコンフィグを開く。
   
2. ラップ変換で検索。
   
3. キーバインドをダブルクリックして好きなキーに変更しましょう！
   僕はAlt + Wに設定しています。初期設定だと確かこのキーは別のところで使用されていたはずなので、辻褄がいく様に設定しましょう。

ショートカットキーを設定しておけば、

1. 囲みたいところを選択。
2. ショートカットキーを入力。
3. 囲みたいタグを入力。

の３ステップだけで実行できます！これで文句ないよね！！

最後に

全Web開発者はこのショートカットキーを使用して、より楽しいWeb開発ライフを！！！