Emmetとは
コードの自動補完を行ってくれる便利なプラグイン。
VisualStudioCodeにおいては、デフォルトで設定がされているため、特に設定せずとも使うことができる。
※AtomやSublime Textではデフォルトで使えないので、外部プラグインの導入が必要。
使用するメリット
コードの記述量を減らすことができ、開発効率up・ミス防止につながる。
積極的に使っていくとよさそう。
デメリット
デメリットというデメリットは特にないが、強いて言うなら、
Emmet記法の学習コストくらいじゃなかろうか。
Emmet記法 代表例
世の中には、チートシートが出回っているので、自分が直近で触ったものだけここに紹介しておく。
①divタグ-クラス生成
.がポイント
<!--「.hoge」と入力⇒ -->
<div class="hoge"></div>
②divタグ-id生成
#がポイント
<!-- 「#hoge」と入力⇒ -->
<div id="hoge"></div>
③spanタグ-生成
<!--「span.hoge」と入力⇒-->
<span class="hoge"></span>
④divタグ -id 、入れ子でdivクラス生成
「>.」 とすることで、入れ子構造を作れるというのがポイント
<!-- 「#hoge>.fuga」と入力⇒ -->
<div id="hoge">
<div class="fuga"></div>
</div>
⑤divタグ -id, 複数クラス生成
<!-- 「#hoge>.fuga*6」と入力⇒-->
<div id="hoge">
<div class="fuga"></div>
<div class="fuga"></div>
<div class="fuga"></div>
<div class="fuga"></div>
<div class="fuga"></div>
<div class="fuga"></div>
</div>
⑥⑤divタグ -id, 連番で複数クラス生成
「$$6」 で、01~06の数値を作れるのがポイント。
<!-- 「#container>.hoge$$*6」と入力⇒ -->
<div id="container">
<div class="hoge01"></div>
<div class="hoge02"></div>
<div class="hoge03"></div>
<div class="hoge04"></div>
<div class="hoge05"></div>
<div class="hoge06"></div>
</div>
以上、積極的に使っていきましょう～。