選択テキストをHTMLタグですぐ囲めるようになるVisual Studio Code拡張機能「htmltagwrap」

コーディングをしていると、テキストの1部だけHTMLタグで囲む場合がよくあります。

例えば下記のようなテキストがあった場合、強調したいために一部を<strong>で囲ったり、装飾を追加するために<span>で囲ったりします。

<p>吾輩は猫である。名前はまだ無い。</p>
<p>どこで生れたかとんと見当けんとうがつかぬ。<br>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

↓

<p>吾輩は<strong>猫</strongである。名前はまだ無い。</p>
<p><span class="underline">どこで生れたかとんと見当けんとうがつかぬ。</span><br>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

作業自体はそこまで時間のかからない作業ですが、回数が増えてくると面倒になってきます。
今回紹介するVisual Studio Codeの拡張機能「htmltagwrap」を使えば、選択テキストをHTMLタグで簡単に囲めるようになります。

ちなみに、EmmetのWrap with Abbreviationを使う手もありますが、それよりもライトに使えます。

Webrandum

EmmetのWrap with Abbreviationで複数行のマークアップを効率的に行う

https://webrandum.net/emmet-wrap-with-abbreviation

Emmetを使うとコードが爆速で入力できるようになりますが、さらに極めたい人は「Wrap with Abbreviation」機能を使うと、選択したテキストをすばやくHTMLタグで囲えます。Visual Studio Codeでの使用方法Visual Studio Codeで使いたい場合は、まずテキストを選択して、shift + command + Pでコマンドパレットを表示させます。「Wrap with Abbreviation」と入力して、「個々の行でラップ変換（Wrap Indivisual Lines with Abbreviation）」を選択します。すると、入力項目が表示されるので、そこにEmmetの記述をします。今回はリストに...

htmltagwrap

marketplace.visualstudio.com

htmltagwrap - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

Extension for Visual Studio Code - Wraps selected code with HTML tags

「htmltagwrap」は選択範囲をHTMLタグで囲む拡張機能です。
単一選択と複数選択の両方に対応していて、複数選択の場合は選択したすべてのテキストに対して同じHTMLタグで一気に囲めます。

基本的な使い方

使い方は非常に簡単で、テキストを選択したあとにoption + Wを押すと、デフォルトでは<p>タグで囲まれて開始タグと終了タグの両方が選択状態になるので、そのままHTMLタグを入力すれば完了です。

1. テキストを選択（単一選択でも複数選択でも可能）
2. option + Wを押す
3. HTMLタグを入力する

ちなみに、spaceを入力すると自動で閉じタグの選択が解除されます。

この機能はclass名などを入力するときにspaceを入力すれば自動で閉じタグの選択が解除されて、開始タグだけにclass名の入力がされることを想定しての機能です。
細かい部分ですが、非常に使いやすくなるように配慮されています。

設定の変更

デフォルトのHTMLタグを変更

デフォルトで囲むHTMLタグを変更したい場合は「”htmltagwrap.tag”」にHTMLタグ名を入力します。

{
  "htmltagwrap.tag": "span"
}

ちなみに、デフォルトでは「"p"」になっています。

終了タグの選択を自動で解除しない

囲んだ後、spaceを入力したときに自動で終了タグを選択解除したくない場合は「”htmltagwrap.autoDeselectClosingTag”」を「false」にします。

{
  "htmltagwrap.autoDeselectClosingTag": false
}