Spacemacsに乗り換えてみた（４）ウェブ制作編

はじめに

• ウェブ制作に欠かせないweb-mode周りについて設定した
• emmet-modeについても調べてみた

htmlレイヤーを追加した

htmlレイヤーのドキュメントを読むと以下のパッケージが追加される

1. web-mode
2. emmet-mode
3. evil-matchit
4. slim-mode
5. jade-mode

この中のweb-modeを使えるようにした

web-modeの設定

• web-modeのウェブサイトを読みながら、必要だと思った設定をdotspacemacs/user-config()に追記した

dotspacemacs/user-configにweb-modeの設定を追記

(defun dotspacemacs/user-config ()
  ...
  ;; web-mode
  (setq web-mode-enable-comment-interpolation t)
  (setq web-mode-enable-current-element-highlight t)
  (setq web-mode-enable-current-column-highlight t)
  ...
  )

web-mode-enable-comment-interpolation

• ソースのコメント内でTODOやFIXMEなどのキーワードを使ったときに強調表示される
• あんまり使わないかもしれないが、たぶんあると便利だと思ってONにした

web-mode-enable-current-element-highlight

• カーソルのあるHTMLタグ名をハイライトする

web-mode-enable-current-column-highlight

• カーソルのあるHTMLのタグのブロックの列をハイライトする
• 上の説明だとよくわからないけれど、とても便利なので設定すべき

web-mode-whitespace-show

• web-modeのウェブサイトによるとC-c C-wで空白文字の表示／非表示（web-mode-whitespace-show）をトグルできると書いてあるが、Spacemacsではeyebrowseに割り当てられている
• るびきちさんのeyebrowse.el紹介の記事を読むと、eyebrowseのキー割り当てのお行儀が悪いためらしい。記事を参考に、eyebrowse-keymap-prefixをC-c wに変更した
• この設定はdotspacemacs/user-init()に書く必要がある（最初にuser-configに書いてみたが、設定が反映されなかったので、user-initに書いたらOKだった）

user-initでプリフィックスを変更

(defun dotspacemacs/user-init ()
  ...
  ;; avoid key-bind conflicts with web-mode
  (setq eyebrowse-keymap-prefix (kbd "C-c w"))
  ...
  )

emmet-modeの設定

• 特に追加で設定することはない
• 入力するときの省略ルールを覚える必要がある
• 詳しくはemmet-modeのUsageを読む
• web-modeで(setq web-mode-enable-auto-expanding t)にした場合の上位互換な動作をするようなマイナーモード（web-mode-enable-auto-expandingはデフォルトではnilになっている）

evil-matchitの設定

• 特に追加で設定することはない
• %でタグ移動ができる（web-modeのC-c C-nと同じカーソル動作）

目次

1. Spacemacsに乗り換えてみた（１）導入編
2. Spacemacsに乗り換えてみた（２）キーバインド編
3. Spacemacsに乗り換えてみた（３）レイヤー編
4. Spacemacsに乗り換えてみた（４）ウェブ制作編
5. Spacemacsに乗り換えてみた（５）メーラ編
6. Spacemacsに乗り換えてみた（６）LaTeX編（予定）