フルスタックエンジニアに

フルスタックエンジニアを目指すブログです。主にRuby on RailsやJavaScriptについて書いていきたいと思います。

VimでVue.jsを書く環境を整える

VimでVue.jsを書く環境を整える1

Vue.jsの特徴の一つに、 Single File Componentsというものがあります。

これはテンプレートスタイルスクリプトを1つのファイルにまとめて記述して、コンポーネントを定義できるというものです。

この.vueファイルVueifyVue-loader を通すことによって、実行可能なコードになります。

だけどVimで書くときに困ったことが

.vueファイルは非常に便利なのですが、1つのファイルに3種類のコードが混在することになるので、 Vimのシンタックスハイライトなどがうまく効きません。

そこで Shougo/context_filetype.vimosyo-manga/vim-preciousを使うとカーソル位置によって、 自動的にfiletypeを切り替えることができるようになります。

.vimrc

NeoBundle 'Shougo/context_filetype.vim'
NeoBundle 'osyo-manga/vim-precious'

autocmd BufNewFile,BufRead *.vue set filetype=html

.vueファイルfiletypehtmlにします。 これでシンタックスハイライトや補完などが正しく機能するようになります。

注意点

1つ注意する点があって、type="text/css"type="text/javascript"などを書いておかないと認識してくれません。

<style type="text/css">
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script type="text/javascript">
  module.exports = {
    data: function () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

こうすると以下のように、快適に書くことができるようになります。

VimでVue.jsを書く環境を整える2