Vim syntax highlighting for Vue components.
This was initially forked from darthmall/vim-vue. I already have an implementation for this but found his code much cleaner. That's why I created a new version instead of a PR.
Install with Vundle
Plugin 'posva/vim-vue'
Install with Pathogen
cd ~/.vim/bundle && \
git clone https://github.com/posva/vim-vue.git
git clone https://github.com/posva/vim-vue.git ~/.vim/pack/plugins/start/vim-vue
Currently only eslint
is available. Please make sure
eslint and
eslint-plugin-vue are installed
and properly configured:
npm i -g eslint eslint-plugin-vue
If your language is not getting highlighted open an issue or a PR with the fix.
You only need to add a line to the syntax/vue.vim
file.
Don't forget to write Vader tests for
the code you write. You can run the tests by executing make test
in the
terminal.
Jade has been renamed to pug.
Therefore you have to replace all your jade
occurrences with pug
. The new
plugin for pug
can be found on the same repository
(the name has already been updated).
This is because Vim tries to highlight text in an efficient way. Especially in
files that include multiple languages, it can get confused. To work around
this, you can run :syntax sync fromstart
when it happens.
You can also setup an autocmd for this, so that every time a Vue file is
opened, :syntax sync fromstart
will be executed pre-emptively:
autocmd FileType vue syntax sync fromstart
See :h :syn-sync-first
and this article
for more details.
If you already have some configuration for filetypes like html, css and javascript (e.g. linters, completion), an easy way to use them in Vue files is by setting compound filetypes like this:
autocmd BufRead,BufNewFile *.vue setlocal filetype=vue.html.javascript.css
caw.vim features built-in support for file context through context_filetype.vim. Just install both plugins and context-aware commenting will work in most files. The fenced code is detected by predefined regular expressions.
To use NERDCommenter with Vue files, you can use its "hooks" feature to temporarily change the filetype. Click for an example.
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
Add let g:vue_disable_pre_processors=1
in your .vimrc to disable checking for prepocessors. When checking for preprocessor languages, multiple syntax highlighting checks are done, which can slow down vim. This variable prevents vim-vue from supporting every pre-processor language highlighting.