AtomにEmmetを入れました

Emmetの存在自体は聞いていたのですが、変にショートカットを覚えることにラーニングコストをかけるより、直で打ってあとは予測補完などに任せた方が便利かな〜〜〜と思っていたんですけど…

大間違いでした。入れた方がいいです、Emmet。

HTMLの書き出し

AtomにEmmetを入れると

!

を入力し、 Shift+Command+eを押すだけで

<!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>

これだけでハッピーになれますね。

テストコード

テスト的にリストを作成する際、とりあえずliをいくつか突っ込んでからバランスを整えるとかあるじゃないですか。

ul>li{test $}*3

この行末でShift+Command+eを押すと

<ul>  
  <li>test 1</li>  
  <li>test 2</li>  
  <li>test 3</li>  
</ul>

爆速で書けてしまう……

本当によく使うテストコードだったり記法だったりに関しては、最早「タグ」などで辞書登録してShift+Command+e押すとかにすると退屈なHTMLコーディングが一瞬で終わってしまいますね!素晴らしい!!

ショートカットを覚えるのが苦手なので、それで脳のキャパを使うくらいであれば(特にHTMLはもうほぼ暗記しているので)打った方が早いなと思いつつ
Emmetはそんな不安など吹っ飛ぶくらい爆速に出来ちゃうので、ぜひ入れてみてください。入れてから使うかを考えましょう!(今回の自分の学び)

div<div></div> に変換するだけでテンション上がるので。よければ。

まだHTMLしか使えてないんですけど、CSSも色々使えるそうですね。人類の夜明けは早いですね。
使い方はいろいろな方が書いているのでしますが、

私は
Cheat Sheet
ATOMでemmet初期設定 - Qiita
Emmetでマークアップを効率化しよう(CSS編) | 株式会社グランフェアズ
を参考にしました。

よく使うタグなど出てきたらまた纏めたいです。爆速コーディングライフへの道は近い…。