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の記述をします。

今回はリストにしたいのでul>li*と入力してenterを押します。

これで一気にリストのマークアップが完了しました。

何度もデザインデータや原稿と、テキストエディタを行ったり来たりしてコピペする手間が省けます。

よく使う場合は、ショートカットキーのshift + command + Rも覚えておくと良さそうです。

「ラップ変換」と「個々の行でラップ変換」の違い

Visual Studio Codeには「ラップ変換（Wrap with Abbreviation）」と「個々の行でラップ変換（Wrap Indivisual Lines with Abbreviation）」の2種類がありますが、「ラップ変換」だと行ごとのマークアップができません。

というわけで、基本的には「個々の行でラップ変換」を使う機会の方が多いです。

ちなみに、「個々の行でラップ変換」でも最後のアスタリスク（*）を入力しなければ、行全体がタグで囲まれます。