Emmet、ご存知ですか？
こんにちは。どんぶラッコです。
みなさん、Emmetってご存知でしょうか？
テキストエディタでHTMLとかを入力していると勝手にコードを補完してくれる機能あるじゃないですか。
それをちゃんと皆さんは活用できていますか？
そんな便利機能を、改めていくつかご紹介します。
ちなみに、Visual Studio Codeであればemmetが標準で搭載されているので、とても便利ですよ！！
こんな機能があるよ！emmetくん！
! + tab
「！」を入力した後にTabキーを押すと…
なんと！
HTMLのテンプレートを自動で生成してくれます！！
これめちゃめちゃ便利ですね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>コード的にはこんなのが表示されます。
ちなみに、デフォルトのテンプレートでは
<html lang=”en”>
なのですが、私は
<html lang=”ja”>
に変更しています。
変更方法はこちらの記事を参考にしました↓↓
https://qiita.com/_upto_me_/items/67fea35140f126256260
cmd + /
コメントが書けます！地味に便利で嬉しい
ul>li*5 + Enter
これも便利ですねー
これを打つと
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>これまで作ってくれます！
数字はliの数ですね。
他にも便利な機能がまだまだあります！
詳細についてはこちらのチートシートを参照すると良いと思います。
https://docs.emmet.io/cheat-sheet/
—
以上、基本的なemmetのコマンドをご紹介しました。
これであなたも今日から爆速HTMLプログラマーだ！
