Emacsでhtml書いてる人、必見 web-mode.el

出ましたよ!新しくhtmlに特化したEmacsのメジャーモード。 web-mode.el

htmlにごちゃごちゃ書き過ぎるのはあれですが、html中のCSS,PHP,JavaScript,Java/JSP,ASPXを色分け出来きて、インデントを統一できるのは便利です。

PHPフレームワークのテンプレートなどに有用ですね。

良いなと思った機能

web-mode-toggle-folding "C-c C-f"
HTMLタグを折り畳む機能です。カーソルの位置のタグ内が省略されアンダーラインでマークされます。戻すときも"C-c C-f"です。
web-mode-rename-element "C-c C-r"
タグの開始タグと終了タグの名前を変えてくれます。
web-mode-match-tag "C-c C-n"
タグの開始タグと終了タグにカーソルを持っていってくれます。入れ子しすぎて対応関係にあるタグが分からなくなった場合に便利すぎます。これで終了タグにコメントを付けずとも大丈夫ですね。
web-mode-delete-element "C-c C-b"
現在位置のタグを丸ごと消せます。
web-mode-duplicate-element "C-c C-j"
現在位置のタグを複製します。

設定はとりあえず必要な部分だけつまみ食い..


(require 'web-mode)

;;; emacs 23以下の互換
(when (< emacs-major-version 24)
  (defalias 'prog-mode 'fundamental-mode))

;;; 適用する拡張子
(add-to-list 'auto-mode-alist '("\\.phtml$"     . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php$" . web-mode))
(add-to-list 'auto-mode-alist '("\\.jsp$"       . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x$"   . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb$"       . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?$"     . web-mode))

;;; インデント数
(defun web-mode-hook ()
  "Hooks for Web mode."
  (setq web-mode-html-offset   2)
  (setq web-mode-css-offset    2)
  (setq web-mode-script-offset 2)
  (setq web-mode-php-offset    2)
  (setq web-mode-java-offset   2)
  (setq web-mode-asp-offset    2))
(add-hook 'web-mode-hook 'web-mode-hook)

こちらもオススメ! Emacs zencoding-modeにHTML5タグを追加する設定

いままでyasnippetで貯めたスニペットもこちらのメジャーモードに流用してしばらく使ってみます。 (スニペットフォルダにweb-modeというフォルダを作り、「.yas-parents」ファイルを作成してhtml-mode css-modeなどと取り込みたいスニペットを書き込んでいく)