読者です 読者をやめる 読者になる 読者になる

なおすけの落書き帳

てきとーに。

zen-codingいれてみた

最近、某所のWebページの更新作業をしています。
CGIとかも使われていない、ピュアなHTMLのページで、正直単純作業です。
サーバ上で、Emacsを使って発狂をしながら作業してると、先輩に「Zen Codingつかったら?」と言われました。
結構使いやすそうだったので導入しました。

調べてみると、今はzen-codingの後継として、emmetっていうのが使われているらしい。

emmet-mode

れっつ導入

1. インストール

$ cd ~/.emacs.d/elisp/
$ curl -O https://raw.github.com/smihica/emmet-mode/master/emmet-mode.el

2. init.elの設定

;;---------------------------------------------------------------------
;; emmet-mode Zen-Coding 
;;---------------------------------------------------------------------

(require 'emmet-mode)
(add-hook 'sgml-mode-hook 'emmet-mode)
(add-hook 'css-mode-hook  'emmet-mode)       ; 自動起動
(add-hook 'emmet-mode-hook 
    (lambda () (setq emmet-indentation 2)))  ; インデントの設定
(setq emmet-move-cursor-between-quotes t)    ; カーソルの自動移動

;;---------------------------------------------------------------------

インデントをしないという人は、2を0に変えればいいようです。

3. 使い方

emmet-modeは、決まった書き方をするとHTMLタグを自動展開してくれます。
HTMLをベタ書きしなくても、簡単にできるわけです。 例えば、<div id="" ...>とかやりたいときには

div#id.class

とかいて、C-jを打つと

<div id="id" class="class"\>\</div>

と、勝手に展開してくれます。
便利そうだなー。

ドットインストールにも取り上げられているので、詳しく知りたい方は参照してください。 ドットインストール