VSCode: 選択文字列部分をhtmlタグで囲む(wrap)方法３通り
HTMLコーディングしていると、 選択した文字列をdivタグやpタグ等で囲みたい場合があります。
Visual Studio Codeではタグで囲む方法がいくつかあるので、 ここでは３通りの方法を紹介します。
選択行が一行の場合
タグで囲みたい選択行が一行の場合に便利な方法です。
例えば、「あいうえお」 という文字列を p タグで囲みたい場合は、 p{あいうえお} と入力し、Enterを押します。
すると、<p>あいうえお</p> というように p タグで囲まれます。
要は、タグ｛選択文字列｝です。
あいうえおかきくけこ
↓ 文字列を p{} で囲む
p{あいうえおかきくけこ}
↓Enterキー で展開される
<p>あいうえおかきくけこ</p>
↓次に「かきくけこ」をsmall{} で囲む
<p>あいうえおsmall{かきくけこ}</p>
↓ Enterキー で展開される
<p>あいうえお<small>かきくけこ</small></p>
こんか感じでタグで囲むことができます。
但し、この方法は選択行が１行の場合のみで、複数行の場合は使えません。
EmmetのWrap with Abbreviation を使用する
この方法なら複数行でもタグで囲むことができます。
まずタグで囲みたい部分を選択します。
「Ctrl + Shift + P」でコマンドパレットを表示し、 「Emmet: Wrap with Abbreviation」を表示させてEnterキーを押します。
タグの入力ボックスが出てくるので囲みたいタグ p や div 等を入力してEnterキーを押すと 選択部分がタグで囲まれます。
この方法はコマンドパレットを表示して、 「Emmet: Wrap with Abbreviation」を呼び出すというプロセスが必要なので少し面倒です。
拡張機能「htmltagwrap」を使う
Visual Studio Code の拡張機能「htmltagwrap」をインストールして使います。
使い方を説明すると、
・まずタグで囲みたい部分を選択します。（複数行もOKです）
・ショートカットキー「Alt + W」を押すと、選択部分がデフォルトで p タグで囲まれます。
上図のカーソル部分は点滅状態になっています。
もしdivタグで囲みたい場合は、そのまま続けて「div」と入力すると div タグで囲まれます。
ショートカットキー「Alt + W」を覚えておけば良いだけなので、 この方法が一番おすすめです。