選択テキストを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を使う手もありますが、それよりもライトに使えます。
htmltagwrap
「htmltagwrap」は選択範囲をHTMLタグで囲む拡張機能です。
単一選択と複数選択の両方に対応していて、複数選択の場合は選択したすべてのテキストに対して同じHTMLタグで一気に囲めます。
基本的な使い方
使い方は非常に簡単で、テキストを選択したあとにoption + Wを押すと、デフォルトでは<p>タグで囲まれて開始タグと終了タグの両方が選択状態になるので、そのままHTMLタグを入力すれば完了です。
- テキストを選択（単一選択でも複数選択でも可能）
- option + Wを押す
- HTMLタグを入力する
ちなみに、spaceを入力すると自動で閉じタグの選択が解除されます。
この機能はclass名などを入力するときにspaceを入力すれば自動で閉じタグの選択が解除されて、開始タグだけにclass名の入力がされることを想定しての機能です。
細かい部分ですが、非常に使いやすくなるように配慮されています。
設定の変更
デフォルトのHTMLタグを変更
デフォルトで囲むHTMLタグを変更したい場合は「”htmltagwrap.tag”」にHTMLタグ名を入力します。
{
"htmltagwrap.tag": "span"
}ちなみに、デフォルトでは「"p"」になっています。
終了タグの選択を自動で解除しない
囲んだ後、spaceを入力したときに自動で終了タグを選択解除したくない場合は「”htmltagwrap.autoDeselectClosingTag”」を「false」にします。
{
"htmltagwrap.autoDeselectClosingTag": false
}
