Emmet Wrapにショートカットキーを付けろという話[VSCode]

今回は短いです。ビギナー向け記事。

よく言われる話だとは思いますし、 タイトルだけ見てそんなの知ってるはって方は今回これ以上の話はしないのでSee ya.

そうでもないという方はこの記事に出会えて幸運だと思いなさい！(えらそう)

本題

Emmet Wrapとは？

Emmet Wrap変換とは HTMLの要素を まとめてタグでくくることができる Emmetの機能。

こんなHTMLがあって、
HTMLで書かれた複数のタグ

全部選択して、
HTMLで書かれた複数のタグを全て選択

コマンドからEmmet: Wrap with abbreviationを選択して、
コマンドからEmmet: ラップ変換を選択

Emmetの省略記法でタグを作成したら、
.containerと入力

なんと驚き、全体が<div>で囲まれた！
HTMLで書かれた複数のタグ全てが.containerで囲まれている

こんな機能です。

こんなに便利な機能ですが、ショートカットキーを設定することで もっと便利になっちゃいます。

ショートカット設定

画面左下の歯車⚙マークから、キーボード ショートカットを選択して、 (またはctrl+K -> ctrl+S)
"管理"から"キーボード ショートカット"を選択

検索してEmmet: ラップ変換の左の鉛筆✐マークをクリックして、
検索タブにEmmet:wrapを入力し、検索結果のEmmet: ラップ変換のエンピツマークを選択

設定したいショートカットカットキーを入力する。 altキーを押した後Wキーを押す(ショートカット設定はこの限りではなく、お好きな設定に) 私はalt+Wにしています。 理由はVSCode拡張機能 htmltagwrapの デフォルトのショートカットキーと同じだからですね。 (既にこの拡張機能を使用している場合は競合に注意してくださいね！)

おわり

これでHTMLは1秒で囲み放題です。 Emmetの省略記法と 併用することでより高速なHTMLコーディングができますな！
どこまでも抱擁して包容力を高めていきましょう

今回はVSCode向けの説明でしたが、 他のテキストエディタでEmmetを使用している場合も 同様に設定すれば良きかな