`で囲ったりします。
```
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当けんとうがつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
```
↓
```
吾輩は猫
どこで生れたかとんと見当けんとうがつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
```
作業自体はそこまで時間のかからない作業ですが、回数が増えてくると面倒になってきます。
今回紹介するVisual Studio Codeの拡張機能「htmltagwrap」を使えば、選択テキストをHTMLタグで簡単に囲めるようになります。
ちなみに、EmmetのWrap with Abbreviationを使う手もありますが、それよりもライトに使えます。
[WebrandumEmmetのWrap with Abbreviationで複数行のマークアップを効率的に行うhttps://webrandum.net/emmet-wrap-with-abbreviationEmmetを使うとコードが爆速で入力できるようになりますが、さらに極めたい人は「Wrap with Abbreviation」機能を使うと、選択したテキストをすばやくHTMLタグで囲えます。Visual Studio Codeでの使用方法Visual Studio Codeで使いたい場合は、まずテキストを選択して、shift + command + Pでコマンドパレットを表示させます。「Wrap with Abbreviation」と入力して、「個々の行でラップ変換（Wrap Indivisual Lines with Abbreviation）」を選択します。すると、入力項目が表示されるので、そこにEmmetの記述をします。今回はリストに...](https://webrandum.net/emmet-wrap-with-abbreviation)
## htmltagwrap
[marketplace.visualstudio.comhtmltagwrap - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrapExtension for Visual Studio Code - Wraps selected code with HTML tags](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)
「htmltagwrap」は選択範囲をHTMLタグで囲む拡張機能です。
単一選択と複数選択の両方に対応していて、複数選択の場合は選択したすべてのテキストに対して同じHTMLタグで一気に囲めます。
## 基本的な使い方
使い方は非常に簡単で、テキストを選択したあとにoption + Wを押すと、デフォルトでは``タグで囲まれて開始タグと終了タグの両方が選択状態になるので、そのまま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
}
```