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.gitgit clone https://github.com/posva/vim-vue.git ~/.vim/pack/plugins/start/vim-vueCurrently only eslint is available. Please make sure
eslint and
eslint-plugin-vue are installed
and properly configured:
npm i -g eslint eslint-plugin-vuedefault value:
'detect_on_enter'
This options controls which preprocessors' syntax will be included when you open a new vue file. So when you are using scss or typescript, the correct syntax highlighting will be applied.
To disable pre-processor languages altogether (only highlight HTML, JavaScript, and CSS):
let g:vue_pre_processors = []Available pre-processors are: coffee, haml, handlebars, less, pug, sass, scss, slm, stylus, typescript, graphql (for tags page-query and static-query).
When g:vue_pre_processors is set to 'detect_on_enter' instead of a list, vim-vue will detect the pre-processors used when a file is opened, and load only their syntax files.
let g:vue_pre_processors = 'detect_on_enter'This is the default behavior. This also matches how vim natively detects syntaxes, for example, when you create a new file and start typing, you wont see the correct syntax until you save the file under a extension so that vim can detect which syntax to load. The 'detect_on_enter' is similar.
When you want vim-vue to detect a new syntax you just typed, just turn the syntax off (:syntax off) and on again (:syntax on).
Loading all syntaxes by default is not recommended because doing so slows down vim quite allot due to the multiple syntax highlighting checks that are done. Also, having multiple syntaxes for the template tag loaded at the same time, may result in the js syntax in the template (like :value="variable") malfunction (see #150 for details).
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).
tcomment has some support for Vue files with multiple languages, without any extra configuration.
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
endfunctionThis was more of a problem when the default value of 'g:vue_pre_processors' was to load all pre-processors available, now that this is not the case, this problem shouldn't happen. That said, if you still are having problems, try setting
let g:vue_pre_processors = [], see if it helps. Read the section on this option above for more information.
When checking for pre-processor languages, multiple syntax highlighting checks are done, which can slow down vim. You can trim down which pre-processors to use by setting g:vue_pre_processors to a whitelist of languages to support:
let g:vue_pre_processors = ['pug', 'scss']