49
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Emacs に zen-coding の後継の Emmet mode を入れる

Last updated at Posted at 2013-07-25

便利ならしいzen-codingを入れてみたら、何でもEmmet という後継のがでてるらしいのでそっちを入れてみた。

Emmetの方はcssにも対応してるっぽい。多分他にも色々と違いがあるみたい。

インストール

cd ~/.emacs.d/site-lisp
wget https://raw.github.com/smihica/emmet-mode/master/emmet-mode.el

設定

(require 'emmet-mode)
(add-hook 'sgml-mode-hook 'emmet-mode) ;; マークアップ言語全部で使う
(add-hook 'css-mode-hook  'emmet-mode) ;; CSSにも使う
(add-hook 'emmet-mode-hook (lambda () (setq emmet-indentation 2))) ;; indent はスペース2個
(eval-after-load "emmet-mode"
  '(define-key emmet-mode-keymap (kbd "C-j") nil)) ;; C-j は newline のままにしておく
(keyboard-translate ?\C-i ?\H-i) ;;C-i と Tabの被りを回避
(define-key emmet-mode-keymap (kbd "H-i") 'emmet-expand-line) ;; C-i で展開

使い方

html ファイルで

ul#id>li.list*3

とか
css ファイルで

p1-2!+m10e+bd1#2s 

とか書くとステキに展開してくれる。

(初め動かなかったけど、scssファイルだったのが原因でした。パッチファイルを書いてマージしてもらったので今は動きます。)

他の使い方に関してはこちらを。
https://github.com/smihica/emmet-mode

49
48
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?