emacsでviewファイルをいじるならweb-modeを使うべき

htmlとPHPが混在するファイルをいじるときが問題だ

emacsで何らかのMVC フレームワークを使っているとき、viewファイルをどのmodeで開くのかが問題です。純粋なHTMLならhtml-modeを使えばよいですし、純粋なPHPならphp-modeを使うと思います。

しかし、以下の様なコードが出てきた時どちらのモードで開発してもしっくりきません。

<div class="foo">
  <?php if ($flg): ?>
   FLG is ON
  <?php else:?>
   FLG is OFF
  <?php endif ?>
</div>

この対処方法をいくつか試してみたので紹介します。

mmm-mode

https://github.com/purcell/mmm-mode

emacs古来からの方法だと、mmm-modeを使うのが主流っぽい。これは、1つのファイルの中で複数のメジャーモードを使えるやつです。。

<?php ?> で囲まれた間だけはphp-modeに自動的に変わるといった具合です。。しかしながらこれがまた使い勝手が悪い・・・というかなんかうまく動かないのです。まじめに試してないのですが、かなり古来からの手法ですし、あまり使わないほうがいいかなーと思います。

mumamo-mode

http://www.emacswiki.org/emacs/MuMaMo

私が最近までメインで使っていたのは、nxhtml-modeに含まれている、nxhtml-mumamo-modeというやつです。 nxhtml-mode自体、非常にゴツいmodeなのですが、そのなかに含まれてます。

バイトコンパイルしないと使っていてつらいので使う時は、絶対にバイトコンパイルしてください。

あまり満足してなかったのだけど、他に選択肢がないという理由で長年つかってました。。しかしながらこれも微妙。nxhtml-mumamo-modeでhtml-modeとphp-modeの混在はできるのだけどとにかく重い。激重い。

ちょっと大きめのファイルになった瞬間動作がもっさりして使うに値しないレベルになってしまい、modeをoffにするということがしょっちゅうありました。

また、html5に対応していないという問題もあります。。例えば以下の様なインデントがされてしまいます。

<html>
  <head></head>
  <body>
  <img src="hogehoge" alt="" >
    <img src="hogehoge" alt="" >
      <img src="hogehoge" alt="" >
        <img src="hogehoge" alt="" >
  </body>
</html>

xhtmlとして解釈するため、\で終わることを期待されているわけなのだけど、html5であれば上記の記述でも問題はないはず。そのためすごく気になるのです。

web-mode

というわけで、最近導入して満足しているのがweb-modeです。上記に書いた不満点はひと通り解消されているて、すごく快適に使うことができます。

インストールは、emacs23以上であればelpaからからインストールすればOK。

M-x package-list-packages

f:id:wadap:20130910101557j:plain

上記のような感じで、versionは6.0.31をインストールしています。

htmlとPHPの混在モードも問題なく使えます。。当然、CSSやJavascriptがまざっても問題ないです。また、html5もちゃんと解釈してくれて、それなりに軽快に動きます。。今のところ全く不満はありません。

当然html+phpだけでなく、erbやjspなどにも対応しています。かなり幅広く対応することができるのではないでしょうか。

私はこちらを参考にして以下の設定を入れています。

なお、私はcakephpを業務では主に使っているので、ctpファイルの操作を中心に設定しています。

;; web mode
;; http://web-mode.org/
;; http://yanmoo.blogspot.jp/2013/06/html5web-mode.html
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.ctp\\'"   . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))

;; web-modeの設定
(defun web-mode-hook ()
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-engines-alist
        '(("php"    . "\\.ctp\\'"))
        )
  )

(add-hook 'web-mode-hook  'web-mode-hook)

;; 色の設定
(custom-set-faces
 '(web-mode-doctype-face
   ((t (:foreground "#82AE46"))))
 '(web-mode-html-tag-face
   ((t (:foreground "#E6B422" :weight bold))))
 '(web-mode-html-attr-name-face
   ((t (:foreground "#C97586"))))
 '(web-mode-html-attr-value-face
   ((t (:foreground "#82AE46"))))
 '(web-mode-comment-face
   ((t (:foreground "#D9333F"))))
 '(web-mode-server-comment-face
   ((t (:foreground "#D9333F"))))
 '(web-mode-css-rule-face
   ((t (:foreground "#A0D8EF"))))
 '(web-mode-css-pseudo-class-face
   ((t (:foreground "#FF7F00"))))
 '(web-mode-css-at-rule-face
   ((t (:foreground "#FF7F00"))))
)