Windows Tips

【VSCode】自動補完機能でキー入力を高速化する（HTML編）

  /

Visual Studio CodeにはEmmet（エメット）という入力を自動補完する機能が組み込まれています。キーワードの入力だけで対応した正しいコードに展開してくれるため、コーディングの高速化やタイプミスの削減（バグの削減）が望めます。

本記事ではHTMLファイル記述時によく使用するEmmetの記法についてまとめます。

この記事で分かること

Emmetの自動補完記法と動作例（HTML)

Contents
  1. Emmetの自動補完記法（HTML編）
  2. まとめ

Emmetの自動補完記法（HTML編）

HTMLテンプレートの展開（スニペット）

!を入力しTabキー押下でHTML5のテンプレートが展開されます。

!

↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Markup

HTML要素の展開

HTML要素の展開

基本となるHTML要素の自動補完です。
HTMLタグ名を入力しTabキー押下で<HTMLタグ></HTMLタグ>の形式に自動で補完してくれます。

button
　⇒　<button></button>
Markup

 

HTML要素の展開では以下の通り属性の付与を併せて行うことができます。

id属性の付与

HTMLタグ#id名を入力しTabキー押下で<HTMLタグ id=”id名”></HTMLタグ>の形式で展開されます。HTMLタグ名を省略して#id名だけ入力した場合は自動的にdiv要素となります。

button#idname
　⇒　<button id="idname"></button>


== HTMLタグを省略した場合はdiv ==
#idname
　⇒　<div id="idname"></div>
Markup
class属性の付与

HTMLタグ.class名を入力しTabキー押下で<HTMLタグ class=”class名”></HTMLタグ>の形式で展開されます。HTMLタグ名を省略して.class名だけ入力した場合は自動的にdiv要素となります。

button.classname
　⇒　<button class="classname"></button>

== HTMLタグを省略した場合はdiv ==
.classname
　⇒　<div class="classname"></div>
Markup
要素内容（文字列）の設定

HTMLタグ{文字列}を入力しTabキー押下で<HTMLタグ>文字列</HTMLタグ>の形式で展開されます。

button{ないよう}
　⇒　<button>ないよう</button>
Markup

id、class、内容は組み合わせて指定可能です。

#idname.classname{あいうえお}
　⇒　<div id="idname" class="classname">あいうえお</div>
Markup

 

複数のHTML要素の一括展開

一度に複数のHTML要素を展開する場合は+で結合して記載しTabキーを押下します。

button+span+div
　↓　
<button></button>
<span></span>
<div></div>


== 一緒にidやclassを付与することも可能 ==
button.classname+span#idname+.classname{divの中身}
　↓
<button class="classname"></button>
<span id="idname"></span>
<div class="classname">divの中身</div>
Markup

 

階層構造があるHTML要素の展開

親子関係のあるHTML要素を展開する場合は>で結合して記載しTabキーを押下します。

content>div>span
　↓
<content>
    <div><span></span></div>
</content>


== 一緒にidやclassを付与する ==
content.classname>.classname>span{内容}
　↓
<content class="classname">
    <div class="classname"><span>内容</span></div>
</content>
Markup

 

応用：()で複数要素を括って子要素として入れることも可能
content>(div+span)
　↓
<content>
    <div></div>
    <span></span>
</content>
Markup

 

HTML要素の繰り返し

HTMLでは同じHTMLタグを繰り返すことが良くあります。*繰り返し回数をHTMLタグに対して指定することで自動的に繰り返し回数分展開されます。

button.btn*2
　↓
<button class="btn"></button>
<button class="btn"></button>
Markup

 

繰り返し要素に対する自動採番

idまたはclassに$記号を付与することで$が番号に自動で置き換わります。桁数を固定とする場合は$$など$の数を増やします。（前0表記となります。）

== idとclass両方に採番 ==
btn#id$$.class$$*2
　↓
<button id="id01" class="class01"></button>
<button id="id02" class="class02"></button>


== 親子関係のある要素の子供を繰り返す ==
ul.xxlist>li.item$$*3
　↓
<ul class="xxlist">
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>
Markup

 

応用：()で複数要素を括って繰り返すことも可能
content>(div>span)*2
　↓
<content>
    <div><span></span></div>
    <div><span></span></div>
</content>
Markup

 

まとめ

Emmetによる自動補完の記法について解説しました。

各記法を自由に組み合わせて使うことが可能ですので、今回説明した以外にも様々なパターンで使うことができます。是非お役立てください。

勉強中の身ですので、誤りや不備等ありましたらご指摘いただけますと幸いです。

VSCode Windows
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

コメントは日本語で入力してください。(スパム対策)

CAPTCHA