VSCodeの便利な自動補完のメモ(HTML編)

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のクラス付きを2つ

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

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

<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 リセットボタン
ショートコードとタイプの対応

まだまだたくさんあります

たくさんあるので、なかなか覚えられませんが、自動補完を使うことで、ミスタイプの防止にもなるので、積極的に使っていきたいですね。

EmmetのWebサイトに、チートシートが掲載されています。
ご興味のある方は、見てみてくださいね。

 

タイトルとURLをコピーしました