HTML

【超便利】救世主Emmet!爆速HTMLコーディングでよく使うコマンド

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プログラマーだ!