Visual Studio CodeでEmmet記法を使う方法

  • ブックマーク
  • Feedly

divと入力してみる

Visual Studio Codeで「div」と入力すると、次のように変換候補が表示されます。

Emmet記法:div:変換前

候補の右端をクリックすると、次のように何が出力されるか表示されます。

Emmet記法:div:変換前

<div>|</div>と表示されますが、「|」はカーソルがあたる位置です。

Enterキーを押下すると、次のように<div></div>が出力され、タグの間にカーソルがあたった状態となります。

Emmet記法:div:入力結果

aと入力してみる

次に「a」と入力すると、次のように表示されます。

Emmet記法:a

Enterキーを押下すると、<a href=””></a>が出力されます。

最初の「|」は、出力したときにカーソルがあたる位置を表わし、2番目の「|」は、Tabキーを押下したときにカーソルが移動する位置を表わします。

参考情報

書籍

この記事を書いた人

アバター画像

羽沢 仁

業務系システムのエンジニアとして、コンサルティング会社で5年、事業会社の社内SEとして5年、フリーランスとして6年、要求定義、設計、開発、テスト、リリース対応の業務に携わってきました。来年からは、街の○○屋さんと直接つながって、ITツールを提供するサービスを開始します。詳しいプロフィールはこちらをご参照ください。