web-mode　20170709.922(in MELPA)
major mode for editing web templates

概要

web-modeはHTML(CSS・JavaScript込み)・HTMLテンプレート(PHP等)を
編集する新しいメジャーモードです。

HTMLは複雑であり、内部にCSSやJavaScriptが入っています。

テンプレートともなるとPHP等のコードまでも混在してきます。

それに対処するためには、以前だと mmm-mode などで
複数のメジャーモードを持たせるという
かなり面倒な設定をする必要がありました。

web-modeは単一のメジャーモードなので、
設定は簡単なのがメリットです。

本家サイトによると、以下のテンプレートエンジンに対応しています。

  • PHP
  • JSP
  • GSP (Grails)
  • ASP / ASP.NET AJAX (Atlas)
  • Django / Twig / Jinja(2) / ErlyDTL (Zotonic) / Selmer
  • ERB
  • EJS
  • FreeMarker
  • Velocity
  • Cheetah
  • Smarty
  • CTemplate / Mustache / Hapax / Handlebars / Meteor / Blaze / ember.js
  • Blade (laravel)
  • Knockoutjs
  • Go Template (Revel)
  • Razor/Play
  • Dust
  • Closure (soy)
  • underscore.js
  • template-toolkit
  • Liquid (jekyll)
  • angular.js
  • web2py
  • mako (pylons)
  • reactjs(jsx)
  • mojolicious

以前調べたときは3000行くらいでしたが、
今は10000行を超えていたのでびっくりしました。

本家サイト にたくさんのスクリーンショットがあります。

インストール

パッケージシステムを初めて使う人は
以下の設定を ~/.emacs.d/init.el の
先頭に加えてください。

(package-initialize)
(setq package-archives
      '(("gnu" . "http://elpa.gnu.org/packages/")
        ("melpa" . "http://melpa.org/packages/")
        ("org" . "http://orgmode.org/elpa/")))

初めてweb-modeを使う方は
以下のコマンドを実行します。

M-x package-install web-mode

アップグレードする方は、
以下のコマンドでアップグレードしてください。
そのためにはpackage-utilsパッケージが必要です。

M-x package-install package-utils (初めてアップグレードする場合のみ)
M-x package-utils-upgrade-by-name web-mode

設定 140824112201.web-mode.el(以下のコードと同一)

(require 'web-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 '("\\.[gj]sp\\'" . 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 '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(setq web-mode-engines-alist
'(("php"    . "\\.phtml\\'")
  ("blade"  . "\\.blade\\.")))

実行方法

$ wget http://rubikitch.com/f/140824112201.web-mode.el
$ emacs -Q -f package-initialize -l 140824112201.web-mode.el


本日もお読みいただき、ありがとうございました。参考になれば嬉しいです。