雑文発散

▼ [Emacs] Emacs の web-mode のカスタマイズ

昨日の続きで web-mode を導入して、カスタマイズしてみている。

導入については、Emacs の package 版があるので、package-install を実行して、

M-x package-install

インストール対象のパッケージ名を入力する。たったこれだけ。便利な世の中になったものだ。

Install package: web-mode

ということで、web-mode の公式サイトに書いてある変数でカスタマイズを試みた。

まずはインデントの設定が3つある。

web-mode-markup-indent-offset

(setq web-mode-markup-indent-offset 2)

• HTML タグのインデント
  • (1) と (4) と (5) に影響する

web-mode-css-indent-offset

(setq web-mode-css-indent-offset 2)

• CSS のインデント
  • (3) に影響する

web-mode-code-indent-offset

(setq web-mode-code-indent-offset 2)

• スクリプトのインデント
  • (7) に影響する

次はパディングの設定。CSS の padding-left と同じように考えれば良いみたい。インデントと思っても差し支えないような気はするけど、用語を変えているのには意味があるのだろう。

web-mode-style-padding

(setq web-mode-style-padding 1)

• <style> タグのパディング
  • (2) に影響する
  • (3) には影響しない

web-mode-script-padding

(setq web-mode-script-padding 1)

• <script> タグのパディング
  • (6) に影響する
  • (7) には影響しない

web-mode-block-padding

(setq web-mode-block-padding 0)

• PHP や Ruby, Java などのコードを HTML 内に記述した場合のパディング
  • 下記サンプルの (a) に影響する

<div>
  <?php
    // (a) 
    for ($i = 0; $i < 10; $i++) {
      echo 'hello<br>';
    }
  ?>
</div>

で、もともと知りたかった部分のインデントである下記の部分の調整はわかっていない。ソースも眺めてみたけど、外部から指定可能な変数は存在していない様子。

<div
  id="hoge"
  class="fuga"
 >

たままた2スペースになっているので、期待通りの動きではあるんだけど。

インデント以外にももちろん機能があって、たとえば、下記の部分まで入力すると、

<div></

自動的にタグが補完される。

<div></div>

また、C-c C-s もしくは M-x web-mode-snippet-insert で、スニペットの挿入ができる。ミニバッファに

Snippet:

とプロンプトが出てきたら、スニペットの名称を入力する。タブキーによる名称の補完もできる。例えば、ul を入れると次のように展開される。

<ul>
  <li></li>
  <li></li>
</ul>

この他、指定した要素以下を非表示にしたり、要素の開始・終了タグの位置を行き来したりなどの機能もあったり、ちゃんと使いこなせば、効率が上がりそうな気配もある。

今後、Twig の編集には jinja2-mode ではなく、web-mode を使っていこう。