読者です 読者をやめる 読者になる 読者になる

Thanks Driven Life

日々是感謝

Emacs で vueify ファイル (.vue) を開いた時の highlighting / support を mmm-mode でどうにかする

経緯

  • Vue.js で構築している pizza-figlet を、試しに Browserify + Vueify してる
  • View Logic と Markup の密結合、下の記事を読んで試してみたかった(React の記事だけど)

    ところで、React.jsではComponentとして、マークアップとViewのロジックをcreateClassの中に書いていくのですが、他のフレームワークのようにマークアップはHTMLやmustacheで書いてViewのロジックをJSで書くみたいに分かれてなくて気持ち悪い!という人もいるのではないでしょうか? それに対して、React.jsの開発者であるPete Huntはそれは「関心の分離(Separation of concerns)」ではなくて「技術の分離(Separation of technologies)」だとしていて、マークアップとViewのロジックは密であるべきとしています。 reactjs - React.jsのComponentについて - Qiita

そんなこんなで .vue ファイルを書くのは良いのですが、問題は私が Emacs ユーザだということ。

vueify の特性上、いろんな言語が入り乱れることになるため、ここは昔懐しい mmm-mode を使ってみました。

その前に

.vue 内に書く <template><script><style> で、lang=xxx を使わない場合は、 mmm-mode を使うまでもなく web-mode で何の問題もありません。

  • <script><style> の中は勝手に js, css と判断してくれる
  • <template> に関しては通常のHTMLタグ同様に扱うので問題無し

書いてみた

gist.github.com

  • dolist のネスト、cl-loop あたり使ったらもっと綺麗に書けるのかもしれないが、ひとまずこれで
  • template の部分は書いてません。jade とか使うことになったら追加すれば良さそう

こいつを eval しておくと、こんな感じになります。

f:id:gongoZ:20150401215145g:plain

とりあえずこれで大分楽になった。

まとめ

GitHub を見ると mmm-mode がまだ時々開発が行われているのと、最古のファイルが 15 years ago とか書いててすごい歴史っぽい。