Emacs에서 Vue 파일을 편집 할 때 설정

Emacs에서 vue 파일을 편집할 때의 설정입니다.
고맙게도 Vue를 쓸 기회가 많아졌기 때문에 제대로 설정해 둘까.vue-mode 라는 확장을 사용해 보았지만, 전혀 신택스 하이라이트하지 않았기 때문에 포기했습니다.
vue-mode는 아무래도.

Vue 파일 편집 시 설정

결론부터.
여러가지 문제는 있습니다만, 아래와 같은 설정에 침착했습니다.

;; ************************************************************************
;; mmm-mode
;; ************************************************************************
(use-package mmm-mode
  :ensure t
  :config
  (setq mmm-global-mode 'maybe)
  (setq mmm-submode-decoration-level 2)
  (set-face-background 'mmm-default-submode-face "gray13")

  (mmm-add-classes
   '((vue-embeded-slim-mode
      :submode slim-mode
      :front "^<template.*lang=\"pug\">\n"
      :back "^</template>")
     (vue-embeded-web-mode
      :submode web-mode
      :front "^<template>\n"
      :back "^</template>\n")
     (vue-embeded-js-mode
      :submode js-mode
      :front "^<script>\n"
      :back "^</script>")
     (vue-embeded-scss-mode
      :submode scss-mode
      :front "^<style.*lang=\"scss\">\n"
      :back "^</style>")))

  (mmm-add-mode-ext-class nil "\\.vue\\'" 'vue-embeded-slim-mode)
  (mmm-add-mode-ext-class nil "\\.vue\\'" 'vue-embeded-web-mode)
  (mmm-add-mode-ext-class nil "\\.vue\\'" 'vue-embeded-js-mode)
  (mmm-add-mode-ext-class nil "\\.vue\\'" 'vue-embeded-scss-mode))

설정 해설

서브 모드가 적용되는 범위의 배경색 설정

배경색을 mmm-mode로 설정합니다.

(set-face-background 'mmm-default-submode-face "gray13")

보충)
색 지정은 gray13 형식으로도 좋지만, #xxxxxx 에서도 확인할 수 있습니다.

서브 모드 설정

(vue-embeded-slim-mode ; サブモード名
 :submode slim-mode ; 適用させるモード名
 :front "^<template.*lang=\"pug\">\n" ; どこから
 :back "^</template>") ; どこまで

front와 back은 정규식으로 지정됩니다.
정규식은 M-x list-colors-display 에서 try and error 하면서 설정했습니다.
Vue의 경우는 아래와 같은 케이스가 있으므로, M-x regexp-builder 를 지정해 주지 않으면 안됩니다.
(내 Vue를 쓰는 법이 재미있을지도 모른다고 생각했다.)

<template>
  <div id="hoge">
    <h1>Hoge</h1>
    <template>
      <h2>fuga</h2>
    </template>
  </div>
</template>

mmm-mode 정보

하나의 메이저 모드중에 복수의 메이저 모드를 적용시킬 수 있는 패키지입니다.
예를 들어, ^ 파일을 열 때에 메이저 모드로서 hoge.rb 가 적용되는 설정의 경우, 코드의 한 개소는 ruby-mode 를 적용하는 것처럼 할 수 있게 됩니다. (그런 일하고 싶은 상황은 없다고 생각하지만 ...)

cf. htps : // 기주 b. 코 m / 푸 r 셋 l / 밧

마지막으로

예측 변환이 움직이지 않는 듯한 (company)

별도로 배경색은 바꾸지 않아도 좋을까

가끔 들여 쓰기가 이상한 느낌 (특히 slim-mode)

매번 js-mode 하지 않으면 안되자

안 1) save 때 hook시킬까

Land of Lisp은 책을 읽는 중입니다 ~

VSCode 너무 편리하지 않습니까?

참고

h tps : // 매우 m. 하테나아 ry. rg/엔 try/20091205/p1

h tps://r-타카시시. 하테나아 ry. rg/엔 try/20111101/1320161117

htps : // 기주 b. 코 m / 푸 r 셋 l / 밧