前書き

Atomに極めて短い省略記法でHTMLやCSSを書くことができるEmmetというパッケージを入れた。
Emmetの記法を簡単にまとめる。

記法

Emmetではタグとしての<や>は必要ない。要素名を書けば必要であろう属性が付与された状態のスタートタグとエンドタグに自動で変換される。
タグを入れ子にするとき(階層を下げる時)に>を使用する。
階層を上げるときは^で。
+記号で同じ階層の要素を記述。
table要素などの特定の子要素が来る要素は+を付けると子要素が挿入される。この場合他の要素を並列に付ける場合+記号を二つ付ける。
要素名の後に#idnameや.classnameとすればid、class属性の付与。他にも要素名の後に特定の記述をすることで要素に対して任意の属性等を付与できる。
loremと記述することでダミーテキストに変換される
フィルターを利用することで一行で出力する等

変換前

#header

変換後

<div id="header"></div>

変換前

head+body>a[href="./test.png"alt="hoge"]+ul.list>li

変換後

<head></head>
<body>
  <a href="./test.png"alt="hoge"></a>
  <ul class="list">
    <li></li>
  </ul>
</body>

変換前

p{test}

変換後

<p>test</p>

変換前

p+ul>li{list$}*3

変換後

<p></p>
<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

変換前

変換後

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

CSS用にも用意されているが、大変量が多く書ききれる気がしない。

参考