web-mode.el

About

web-mode.el is an autonomous emacs major-mode for editing web templates: HTML documents embedding CSS / JavaScript and Server blocks.

Native Features

Screenshot

Download

You can download this mode here.

A GitHub repository is available: http://github.com/fxbois/web-mode/

web-mode.el is GPL and Free Software.

Install

First drop the file web-mode.el in a directory defined in your load-path.
Then, add in your .emacs (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 '("\\.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 '("\\.mustache\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))

Using web-mode for editing plain HTML files can be done this way (add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))

Customisation

The first customisations can be put in a hook like this (defun web-mode-hook () "Hooks for Web mode." (setq web-mode-markup-indent-offset 2) ) (add-hook 'web-mode-hook 'web-mode-hook)

The customisations below should not be put in the hook. Declare them before loading web-mode.el

Shortcuts

General

  • C-c C-; comment / uncomment line(s)
  • C-c C-e show tag mismatch
  • C-c C-f toggle folding on a block
  • C-c C-i indent entire buffer
  • C-c C-m mark and expand
  • C-c C-n jump to opening/closing tag
  • C-c C-r replace HTML entities
  • C-c C-s insert snippet
  • C-c C-w toggle display of invalid whitespaces

HTML element

  • C-c / element close
  • C-c eb element beginning
  • C-c ed element delete
  • C-c ee element end
  • C-c ec element clone
  • C-c en next element
  • C-c ep previous element
  • C-c eu parent element (up)
  • C-c er rename element
  • C-c es select element
  • C-c ei select element content (inner)

HTML tag

  • C-c tb tag beginning
  • C-c te tag end
  • C-c tm fetch matching tag
  • C-c ts select tag
  • C-c tp previous tag
  • C-c tn next tag

Helper functions

Engine families

namecousinsextensionsexample
django twig, jinja, jinja2, erlydtl *.djhtml, *twig*, *.dtl, *.tmpl {# comment #}
<ul id="navigation">
  {% for item in items %}
  <li>{{ item }}</li>
  {% endfor %}
</ul>
php *.php, *.psp, *.ctp <?php /* comment */ ?>
<ul id="navigation">
  <?php foreach ($items as $item): ?>
  <li><?=$item?></li>
  <?php endforeach; ?>
</ul>
erberuby, ember, erubis*.erb, *.rhtml
velocitycheetah*.vsl, *.vm
blade*blade*
gogtl*.gohtml, *.gotmpl
jsp*.jsp
freemarker*.ftl [#-- the comment --]
<ul class="people_list">
  [#list items as item]
  <li>${item}</li>
  [#/list]
</ul>
aspx*.aspx, *.ascx
asp*.asp
razorplay, play2*.cshtml, *.vbhtml
ctemplatemustache, handlebars, ember, hapax, ngtemplate*.hbs, *.mustache {{! comment }}
<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

FAQ

Support

Dedicated google group : https://groups.google.com/d/forum/web-mode

Changelog

2013-XX : current/devel
2013-03 : v5.0 aka “Tignes” Release
2013-01 : v4.0 aka “Trianon Palace” Release
  • compatibility with new engines: velocity/cheetah, smarty
  • compatibility with the alternative FreeMaker syntax: [# ] [@ ] (thx Daniel Dekany)
  • indentation improvement (thx gnuvince)
  • speed improvement when using web-mode-engines-alist
2012-12 : v3.5 aka “St Petersbourg” Release
2012-11 : v3.0 aka “Sandy at the Knickerbocker Club” Release
2012-09 : v2.0 aka “La Baule” Release
2012-05 : v1.0 aka “Valençay” Release
2011-08 : v0 aka “La Ferté-Vidame” Release

Contributors

Ivan Toshkov, Guillaume Pasquet, Andrei Chitu, Jose Peleteiro, Tad Fisher

Todo

Author

François-Xavier Bois - < fxbois AT Google Mail Service >

Co-founder and CTO of KerniX, Digital Agency (Web/Mobile) in Paris (FR).

@fxbois -