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サイトに、チートシートが掲載されています。
ご興味のある方は、見てみてくださいね。