VSCodeの便利な自動補完のメモ（HTML編）

HTMLなどのコーディングをしていくときに、VSCodeを使っている人多いですね。
このVSCodeには、初めから強力な自動補完が搭載されています。

覚えてしまえるとよいのですが、なかなか＞＜；
すでに、出尽くしている情報かもしれませんが、使い方を自分なりにまとめてみます。

よく使う自動補完
まだまだたくさんあります

よく使う自動補完

この自動補完機能を Emmet といいます。
以下に、（ショートコード）　：（どうなるか）のように、まとめてみます。

!　：HTMLのひな形に変換します！！

<!DOCTYPE html>
<html lang="ja">
<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>

ファイルを開いて、「!」打って、Tabキー押すだけ！
感動で、涙が出そうなレベルです。
ちなみに、「html:5」でも同じようになりますが、「!」最強です。

#container　：containerのid付きの<div>に変換

<div id="container"></div>

ちなみに、「#」を「.」にするとclass付きに変換してくれます。
さらに子要素も入力しちゃいます。↓

#container>.cl*2　：containerの中に、clのクラス付きを２つ

<div id="container">
  <div class="contents"></div>
  <div class="contents"></div>
</div>

ul>.cls*5　：clsクラス付きリストを５つ出します。

<ul>
  <li class="cls"></li>
  <li class="cls"></li>
  <li class="cls"></li>
  <li class="cls"></li>
  <li class="cls"></li>
</ul>

「>」で、子要素も一気に変換です。「*」で数も指定できます。

input:t　：input系も一気に！

<input type="text" name="" id="">

他にも、「input:（ここ）」を変えると、いろいろなタイプのinputタグになります。
以下にまとめてみます。今回は、HTML5から追加された新しいタイプは省略しています。

input:（ここの文字）	こんなタイプになります
p	パスワード入力欄
h	表示しないとき（hidden）
c	チェックボックス
r	ラジオボタン
f	ファイルの選択
s	送信ボタン
i	画像形式の送信ボタン
b	ボタン
reset	リセットボタン