サイトアイコン Lonely Mobiler

HTML や CSS を書くのがめっちゃ捗る Emmet を Atom でも使う

Emmet という HTML や CSS の記述がめっちゃ楽になるツールがあります。以前は Zen Coding と呼ばれてたのだけどいつのまにか名前が変わったみたいですね。

Emmet Documentation

例えばエディタ上で

nav#menu>ul>li*3

という文字列を

<nav id="menu"> <ul> <li></li> <li></li> <li></li> </ul> </nav>

と展開できます。簡単なとこでも覚えておくと HTML 書くのがはかどります。

Zen-Coding は Vim では使ってたのですがもちろん Atom でも使えます。

emmet

使い方は簡単、html や PHP ファイルを開いている状態で HTML へ展開する用の文字列を打ち込んだら tab を押すだけです。

Tab キーは keymap.cson ファイルで以下のように設定可能です。

'atom-text-editor[data-grammar="YOUR GRAMMAR HERE"]:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab'

HTML 書く機会が多ければかなり便利ですねこれ。

Sponsored Link
モバイルバージョンを終了