開発したアプリなど一覧

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 を押すだけです。

atom-emmet

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

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

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

Sponsored Link

コメント

  1. saku-supp より:

    atom windowsにemmetをインストールしたんだけど使えません。何か設定が必要ですかね?

タイトルとURLをコピーしました