emacsでvue-modeを使ったときに設定メモ

• 概要
• 環境
• インストール
• script タグの setup に対応していない
• mmm-mode のカラー設定
• 最後に

概要

AdamNiederer/vue-modeを使うことで vue ファイルを編集するときにいい感じハイライトなどをしてくれます

ただ少しつまづく点があったのでそこも紹介します

環境

• emacs 27.1
• mmm-mode 20200908.2236
• vue-mode 20190415.231
• typescript-mode 20220815.1954

インストール

package-list-packagesから以下をインストールしました

• mmm-mode
• vue-mode
• typescript-mode

script タグの setup に対応していない

これ https://github.com/AdamNiederer/vue-mode/pull/120/files が取り込まれていないため setup 構文がある場合に script タグをハイライトしてくれません

直接 vue-mode.el を編集して対応させて上げるのがいいかなと思います
140行目あたりに setup の設定を追記しましょう

• vim /root/.emacs.d/elpa/vue-mode-20190415.231/vue-mode.el

(defconst vue--front-tag-lang-regex
  (concat "<%s"                               ; The tag name
          "\\(?:"                             ; Zero of more of...
          "\\(?:\\s-+\\w+=[\"'].*?[\"']\\)"   ; Any optional key-value pairs like type="foo/bar"
          "\\|\\(?:\\s-+scoped\\)"            ; The optional "scoped" attribute
          "\\|\\(?:\\s-+module\\)"            ; The optional "module" attribute
          "\\|\\(?:\\s-+setup\\)"             ; The optional "setup" attribute
          "\\)*"
          "\\(?:\\s-+lang=[\"']%s[\"']\\)"    ; The language specifier (required)
          "\\(?:"                             ; Zero of more of...
          "\\(?:\\s-+\\w+=[\"'].*?[\"']\\)"   ; Any optional key-value pairs like type="foo/bar"
          "\\|\\(?:\\s-+scoped\\)"            ; The optional "scoped" attribute
          "\\|\\(?:\\s-+module\\)"            ; The optional "module" attribute
          "\\|\\(?:\\s-+setup\\)"             ; The optional "setup" attribute
          "\\)*"
          " *>\n")                            ; The end of the tag
  "A regular expression for the starting tags of template areas with languages.
To be formatted with the tag name, and the language.")

(defconst vue--front-tag-regex
  (concat "<%s"                        ; The tag name
          "\\(?:"                      ; Zero of more of...
          "\\(?:\\s-+" vue--not-lang-key "[\"'][^\"']*?[\"']\\)" ; Any optional key-value pairs like type="foo/bar".
          ;; ^ Disallow "lang" in k/v pairs to avoid matching regions with non-default languages
          "\\|\\(?:\\s-+scoped\\)"      ; The optional "scoped" attribute
          "\\|\\(?:\\s-+module\\)"      ; The optional "module" attribute
          "\\|\\(?:\\s-+setup\\)"             ; The optional "setup" attribute
          "\\)*"
          "\\s-*>\n")

編集できたら el -> elc をバイトコンパイルします

• cd /root/.emacs.d/elpa/vue-mode-20190415.231
• rm vue-mode.elc

emacs で /root/.emacs.d/elpa/vue-mode-20190415.231/vue-mode.el を開いて byte-compile-file を実行すれば OK です

mmm-mode のカラー設定

emacs -nw で起動している場合にカーソルのある行が真っ黒になってしまうので mmm-mode の face をオフにします
ちゃんと face 用の変数が定義されているのでそれを 0 にするだけです

• vim .emacs.d/site-lisp/init.el

; for mmm-mode
(require 'mmm-mode)
(setq mmm-global-mode 'maybe)
(setq mmm-submode-decoration-level 0)
; (set-face-background 'mmm-default-submode-face "#000000")

最後に

今回紹介した vue-mode はあまりメンテされていないようなので vue に構文などが追加された場合に追従できなくなる可能性がありそうです