web開発を効率的に！emacsにemmetを導入する

どうも、すっかりemacsにとらわれてしまった大学生です。

授業のプログラミングで使わされるエディターがemacsでして、最初触ったとき、｢何このエディター使いにくすぎ！｣って思いました。
そこで慣れるために自分のPCにも入れて使い始めたのですが、気づいたらすっかりハマっています。

それまではvscodeを使って普通にマウスとか矢印キーとか使っていたのですが、今ではホームポジションから手を動かしたくない病患者です。

ということで、emacsに慣れてきたところでwebの勉強を再開しようとして、emmetを導入しようとしたら意外とてこづったので記事に残しておきます。

あ、一応ですがemmetというのはhtmlやcssを効率的にするためのものです。
例えば、次のように入力します。

ul>li.page$*5   

これを展開すると、

<ul>
    <li class="page1"></li>
    <li class="page2"></li>
    <li class="page3"></li>
    <li class="page4"></li>
    <li class="page5"></li>
</ul>

こんなふうにできちゃいます！ 非常に便利なものです。
打つ文字数を格段に減らせます。
詳しくはググってみてください。

導入方法

こちらが公式ページです。

github.com

やり方とか実は全部ここに書いてあります。
これから書くのは自分なりにわかりやすくまとめたものです。

まずはパッケージリストからemmet-modeをインストールします。

M-x package-list-package  

インストールできたら、設定をinit.elに記述していきます。

私はこんな感じです。

;; emmet setting
(require 'emmet-mode)
(add-hook 'web-mode-hook 'emmet-mode); web-mode起動時
(add-hook 'sgml-mode-hook 'emmet-mode); あらゆるマークアップ言語
(add-hook 'css-mode-hook 'emmet-mode); css-mode起動時 

特に何もしてなかったです。
ただ対応するファイルを開いたときに自動でemmet-modeが起動するようになっているだけです。
これで、見事emmetが使えるようになります。
あ、ちゃんと M-x eval-buffer とかして設定反映させてくださいね。

発生した問題

問題はこの後発生しました。

｢よーしこれからemmetガンガン使って行くぞー｣
意気揚々と私はhtmlファイルを開きました。
とりあえず、ul>li*5 と試してみました。

が、しかし！！

何も起こらないのです。
あれーおっかしいなー。
ちゃんと設定反映させたんだけどなー。
もう一度設定ファイルを M-x eval-buffer し、htmlファイルを開き直してもやっぱり何も起こらない。

｢なんでだよー！｣

ややイライラを募らせながら公式ドキュメントを読んでみました。
するとこんな記述が。

これを見つけた私はすぐに実行。

すると、ついに！

マイナーモードのところにEmmetの文字が！
これにて一件落着。
emmetを使いこなすための日々がスタートできましたとさ。

まとめ

みなさん、設定だけして満足しないでください。
emmet-modeは起動しないと使えませんよ！