【VSCode】選択した「要素」を別の「新しい要素（タグ）」で囲む方法

こんにちは、さちです。

普段、ウェブサイトを作るときは「Visual Studio Code（以下：VSCode）」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。

今回は、この VSCode で「要素」を別の新しい HTML タグ（新しい要素）で簡単に囲む方法について書いていきます。

便利ですし意外とよく使うので、ぜひ覚えて使いこなして下さい！

欲しい機能は標準実装されている

欲しかった機能は VSCode に標準で実装されています。拡張機能が必要ないのはありがたいですね。

しかし、問題なのは「機能」はあるけど「ショートカットキー」が割り当てられていないということ。

ショートカットキーを使いたい場合は、自分で割り当てる必要があります。その手順を次項で見ていきましょう。

ショートカットキーが必要ない場合は、「要素」を選択 → 「コマンドパレット」を表示 → 「wrap」で検索 → 「Emmet: ラップ変換」でOK

「要素を新しいタグで囲む」機能に、自分が使いやすい「ショートカットキー」を新しく割り当ててみましょう。

ウィンドウ左下（アクティビティバー）にある「（管理）」をクリック。
「キーボードショートカット」をクリック。
「検索」に emmet wrap と入力します。
「Emmet: ラップ変換」コマンドの左端にある「（キーバインドの追加）」アイコンをクリック。
割り当てたいショートカットキー（今回は Ctrl + Shift + G キー）を押して、Enter キーを押します。（ショートカットキーが他の機能と競合している場合はこちらの方法で解決する）
ショートカットキーを割り当てることができました。
これで、ショートカットキーを使用して……
簡単に「要素」を新しい「タグ」で囲めるようになりました。