Vim syntax and indent plugin for .vue
files. Mainly inspired by mxw/vim-jsx.
How to install
Plugin 'leafOfTree/vim-vue-plugin'
cd ~/.vim/bundle && \
git clone https://github.com/leafOfTree/vim-vue-plugin --depth 1
Plug 'leafOfTree/vim-vue-plugin'
:PlugInstall
Or manually, clone this plugin to path/to/this_plugin
, and add it to rtp
in vimrc
set rtp+=path/to/this_plugin
This plugin works if filetype
is set to vue
. Please stay up to date. Feel free to open an issue or pull request.
Since .vue
is a combination of CSS, HTML and JavaScript, so is vim-vue-plugin
. (Like XML and JavaScript for .jsx
).
Supports
foldexpr
foldmethod.^.wpy
files from WePY.^: see Configuration for details. Relative plugins need to be installed.
Set global variable to 1
to enable or 0
to disable. Ex:
let g:vim_vue_plugin_load_full_syntax = 1
variable | description | default |
---|---|---|
g:vim_vue_plugin_load_full_syntax * |
Enable: load all syntax files in runtimepath to enable related syntax plugins. |
|
Disable: only in $VIMRUNTIME/syntax , ~/.vim/syntax and $VIM/vimfiles/syntax . |
0 | |
g:vim_vue_plugin_use_pug * |
Enable pug syntax for <template lang="pug"> . |
0 |
g:vim_vue_plugin_use_coffee |
Enable coffee syntax for <script lang="coffee"> . |
0 |
g:vim_vue_plugin_use_typescript |
Enable typescript syntax for <script lang="ts"> . |
0 |
g:vim_vue_plugin_use_less |
Enable less syntax for <style lang="less"> . |
0 |
g:vim_vue_plugin_use_sass |
Enable sass syntax for `<style lang="scss | sass">`. |
g:vim_vue_plugin_use_scss |
Enable scss syntax for <style lang="scss"> . |
0 |
g:vim_vue_plugin_use_stylus |
Enable stylus syntax for <style lang="stylus"> . |
0 |
g:vim_vue_plugin_has_init_indent |
Initially indent one tab inside style/script tags. |
0+ |
g:vim_vue_plugin_highlight_vue_attr |
Highlight vue attribute value as expression instead of string. | 0 |
g:vim_vue_plugin_highlight_vue_keyword |
Highlight vue keyword like data , methods , … |
0 |
g:vim_vue_plugin_use_foldexpr |
Enable builtin foldexpr foldmethod. |
0 |
g:vim_vue_plugin_debug |
Echo debug messages in messages list. Useful to debug if unexpected indents occur. |
0 |
*: Vim may be slow if the feature is enabled. Find a balance between syntax highlight and speed. By the way, custom syntax can be added in ~/.vim/syntax
or $VIM/vimfiles/syntax
.
+: 0 for .vue
and 1 for .wpy
Note
g:vim_vue_plugin_load_full_syntax
applies to other HTML/Sass/Less
plugins.filetype
is set to vue
so autocmds and other settings for javascript
have to be manually enabled for vue
.As there are more than one language in .vue
file, the different behaviors like mapping or completion may be expected under different tags.
This plugin provides a function to get the tag where the cursor is in.
GetVueTag() => String
Return value is 'template'
, 'script'
or 'style'
.autocmd FileType vue inoremap <buffer><expr> : InsertColon()
function! InsertColon()
let tag = GetVueTag()
if tag == 'template'
return ':'
else
return ': '
endif
endfunction
Currently emmet-vim works regarding your HTML/CSS/JavaScript emmet settings, but it depends on how emmet-vim gets filetype
and may change in the future. Feel free to report an issue if any problem appears.
Since there are many sub languages included, most delays come from syntax files overload. A variable named b:current_loading_main_syntax
is set to vue
which can be used as loading condition if you’d like to manually find and modify the syntax files causing overload.
For example, the builtin syntax sass.vim
and less.vim
in vim8.1 runtime and pug.vim
in vim-pug/syntax always load css.vim
which this plugin already loads. It can be optimized like
- runtime! syntax/css.vim
+ if !exists("b:current_loading_main_syntax")
+ runtime! syntax/css.vim
+ endif
Svelte is a compilation web framework which shares a similar syntax to Vue.
Author: leafOfTree
Source Code: https://github.com/leafOfTree/vim-vue-plugin
#vuejs #vue #javascript #vue-js