Vim
vue.js

VimでVue.jsをある程度快適に編集する

シンタックスハイライト

  • vim-vueを入れるだけでOK
  • dein.vimを使っているなら、遅延読み込みを使うと良い
[[plugins]]
repo = "posva/vim-vue"
on_ft = ["vue"]

途中からハイライトされなくなる現象

  • .vimrcに以下の設定を追記すると解決する……らしいんですが自分の環境では直りませんでした(なんでや!)
autocmd FileType vue syntax sync fromstart

スクロールが重い場合の対処法

  • READMEによると、プリプロセッサー言語のシンタックスハイライトが原因らしいです
  • set ttyfastset lazyredrawを設定すると結構速くなる
set ttyfast
set lazyredraw
  • プリプロセッサー言語を使わない場合は、ハイライトを無効にしてしまうのもアリ
let g:vue_disable_pre_processors=1

deoplete、neosnippet

以下の3つを入れると、自動補完・snippetが使えます

NERDCommenterやcaw.vimでコメントの文字列を使い分ける

  • templatescriptstyleでそれぞれ挿入されるコメントの文字列を変えたいとき
  • caw.vimで使用する場合は、context_filetype.vimを入れるだけで自動で判別してくれます
  • NERDCommenterを使う場合は.vimrcに以下を追記します(READMEより参照)
let g:ft = ''
function! NERDCommenter_before()
  if &ft == 'vue'
    let g:ft = 'vue'
    let stack = synstack(line('.'), col('.'))
    if len(stack) > 0
      let syn = synIDattr((stack)[0], 'name')
      if len(syn) > 0
        exe 'setf ' . substitute(tolower(syn), '^vue_', '', '')
      endif
    endif
  endif
endfunction
function! NERDCommenter_after()
  if g:ft == 'vue'
    setf vue
    let g:ft = ''
  endif
endfunction