Emmet Cheat Sheet（Visual Studio Code + デフォルト設定編） #HTML

これはなに？

Visual Studio Code はとても素敵なエディタです。
そんな素敵なエディタで、こちらもまたとても素敵なEmmet入力を使うためのチートシートです。

Emmetって？

簡単に言えばHTMLのコーディングを効率よく行えるための便利機能・ショートカット・予測変換みたいなものです。いろいろなエディタで広く採用されている入力方式なので覚えておけばつぶしがききます。オレオレ効率化よりはよいと思います。

なぜデフォルト設定？

エイリアスなど自分用に作ってのチューニングもよいですが、インストールしてすぐそのままで使えるのはメリットです。まずは守破離の守です。

個人的な思いとしても...マイクロソフトさん凄い会社です。その会社が「この設定をデフォルトでいくぞ！」と言っている設定なので極力尊重。出てきた料理になんでもかんでもすぐに調味料かけるよりは、まずは一口そのままで十分に料理人の意図をくみ取ってみて、調味料はそれからにしたい。

ということで以下本題のチートシートです。

Emmet チートシート

基本操作

Visual Studio Codeで.html .css .hbs などHTML系のファイルを開く。
HTMLのタグ名などをいれていくと途中で候補がでてくるのでEnterまたはTABで決定する。
基本的にはただそれだけ。
候補が複数出てくる場合には上下で選択可能です。

htmlのテンプレートを作る

html:5[Enter]

ht　くらいまで入力すると html html:5 html:xml あたりの候補がでてくるので html:5 を選んで Enter すると以下のようなテンプレートに展開されます。

<!DOCTYPE html>
<html lang="en">
<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>

この展開された状態でさらにTABをおすと普段書き換えるであろういくつかの項目にカーソルがジャンプしていきます。言葉ではわかりづらいですがやってみればわかります。

imgとかdivとかの普通のタグを簡単に書く

img[Enter]

が、

<img src="" alt="">

のように展開されます。divなら<div></div>だったりaが<a href=""></a>だったり。ほとんどどんなタグでもいい感じに展開されます。

タグを入れ子にしたり複数個展開する

div*2[Enter]

であれば div × 2 で、

<div></div>
<div></div>

になります。
入れ子にしたければ、

div>div[Enter]

とすれば

<div>
    <div></div>
</div>

になります。
もちろんさまざま組み合わせることも可能で、

ul>li*3[Enter]

とすれば、

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

になります。カッコでくくって範囲をまとめるような書き方もできます。

タグにクラスや属性をつけて展開する

div#myid

は # で属性がついて、

<div id="myid"></div>

です。
次にクラスは . でつけられるので、

div.myclass

が

<div class="myclass"></div>

になります。もちろん div.myclass#myid は <div class="myclass" id="myid"></div> のように、組み合わせも可能です。
この辺りは cssセレクタの書き方に違いのでなんとなく書いてみたらなんとなくできます。

すでにある文字列をタグでかこむ

吾輩は猫である を <p>吾輩は猫である</p> にしたいケースです。
残念ながら... その機能自体はあるもののデフォルトの設定でショートカットがありません。
やるとしたら、Ctrl + P → > Emmet Wrap with くらいまで入力すると候補（Emmet: Wrap with Abbreviation）がでてくるので Enter さらにどのタグで囲むか聞いてくるので p をいれて Enter です。

ちょっと複雑ですがなれたら、Ctrl + p → > Em[Enter] → p[Enter] くらいのことなのでさくっと書けます。

かわりにこういうやりかたもあります。

p{吾輩は猫である}

と書いて展開すると p で囲まれます。
これも手が慣れてしまえば、 p{ → [End]で文末 → }[Enter] という感じでさくっといけます。

操作 Tips. 候補を出すショートカット

例えば d i v と入力していけば候補が徐々に出てきますので必要に応じて [Enter] などいれてくれたらよいです。
ただ div とコピペで入力したり、いっかいBacksapceで候補を消したりした場合、改めて候補をだすためには Ctrl + Space を入力してください。候補があたらめて出てきます。

Emmetの公式的なドキュメント

おそらくこの辺りが公式なのだと思います。

https://docs.emmet.io/
https://code.visualstudio.com/docs/editor/emmet

よい Visual Studio Code ＆ Emmet ライフを！！

Emmet Cheat Sheet（Visual Studio Code + デフォルト設定 編）