From a923db95fd58c138987f4d0fdd85e9af1d2a4539 Mon Sep 17 00:00:00 2001 From: yemai Date: Fri, 28 Sep 2018 15:23:54 +0800 Subject: [PATCH] feat: support css indent --- README.md | 25 +++++++++++++++++++-- after/indent/vue.vim | 53 +++++++++++++++++++++++++++----------------- after/syntax/vue.vim | 11 ++++++--- 3 files changed, 64 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index ca10601..ab1b8b3 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,26 @@ -# vim-vue +# vim-vue-plugin -Vim plugin for `.vue` file syntax and indent. Mainly inspired by [mxw/vim-jsx][1] +Vim plugin for `.vue` files syntax and indent. Mainly inspired by [mxw/vim-jsx][1]. + +## Install + +- Use [VundleVim][2] + + Plugin 'leafOfTree/vim-vue-plugin' + +- Or manual: download 'vim-vue-plugin' and drop it in `Vim/vimfiles`. + +Plugin works if filetype is set to `javascript.vue`. + +## How it works + +Since `.vue` is a combination of CSS, HTML and JavaScript, so is `vim-vue-plugin`. (Like XML and JavaScript for `.jsx`). + +Support `.wpy` files too. + +## Config + +## Screenshot [1]: https://github.com/mxw/vim-jsx "mxw: vim-jsx" +[2]: https://github.com/VundleVim/Vundle.vim diff --git a/after/indent/vue.vim b/after/indent/vue.vim index 49c44f0..c606109 100644 --- a/after/indent/vue.vim +++ b/after/indent/vue.vim @@ -1,27 +1,28 @@ """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" -" Vim ftplugin file +" Vim indent file " " Language: Vue (Wepy) " Maintainer: leafOfTree " """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +if exists("b:did_vue_indent") + finish +endif + se sw=2 ts=2 " Save the current JavaScript indentexpr. let b:vue_js_indentexpr = &indentexpr -" Prologue; load XML indentation. -if exists('b:did_indent') - let s:did_indent=b:did_indent - unlet b:did_indent -endif - +unlet b:did_indent runtime! indent/xml.vim -if exists('s:did_indent') - let b:did_indent=s:did_indent -endif +unlet b:did_indent +runtime! indent/css.vim + +let b:did_indent = 1 +let b:did_vue_indent = 1 " JavaScript indentkeys setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e @@ -44,6 +45,11 @@ function! SynsHTMLish(syns) return last_syn =~? '\v^(html)' endfunction +function! SynsCSSish(syns) + let last_syn = get(a:syns, -1) + return last_syn =~? '\v^(css)|(less)|(sass)' +endfunction + function! SynsVueScope(syns) let first_syn = get(a:syns, 0) return first_syn =~? '\v^(vueStyle)|(vueTemplate)|(vueScript)' @@ -51,6 +57,7 @@ endfunction function! GetVueIndent() let curline = getline(v:lnum) + let prevline = getline(v:lnum - 1) let cursyns = SynsEOL(v:lnum) let prevsyns = SynsEOL(v:lnum - 1) @@ -61,21 +68,27 @@ function! GetVueIndent() if curline =~? s:end_tag let ind = ind - &sw endif + elseif SynsCSSish(prevsyns) + let ind = GetCSSIndent() else - if curline =~ s:vue_tag - let ind = 0 + if len(b:vue_js_indentexpr) + let ind = eval(b:vue_js_indentexpr) else - if len(b:vue_js_indentexpr) - let ind = eval(b:vue_js_indentexpr) - else - let ind = cindent(v:lnum) - endif + let ind = cindent(v:lnum) endif endif - if SynsVueScope(cursyns) && ind == 0 - let ind = &sw + if curline =~? s:vue_tag + let ind = 0 + elseif (exists("g:vim_vue_plugin_has_init_indent") + \ && g:vim_vue_plugin_has_init_indent != 0) + if SynsVueScope(cursyns) && ind == 0 + let ind = &sw + endif + else + if prevline =~? s:vue_tag + let ind = 0 + endif endif - return ind endfunction diff --git a/after/syntax/vue.vim b/after/syntax/vue.vim index 7a08e07..54f84da 100644 --- a/after/syntax/vue.vim +++ b/after/syntax/vue.vim @@ -1,8 +1,8 @@ """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" " Vim syntax file " -" Language: Vue (JavaScript) -" Maintainer: leafOfTree +" Language: Vue (Wepy) +" Maintainer: leaf " Depends: pangloss/vim-javascript " " CREDITS: Inspired by mxw/vim-jsx. @@ -20,7 +20,12 @@ let b:current_syntax='vue' " Find tag + keepend contains=@jsAll,jsImport,jsExport -syn region vueStyle start=++ end=++ keepend contains=@CSSSyntax +syn region vueStyle start=++ end=++ keepend contains=@CSSSyntax,@HTMLSyntax + +hi def link vueTag htmlTagName +hi! link vueTemplate vueTag +hi! link vueScript vueTag +hi! link vueStyle vueTag " Officially, vim-jsx depends on the pangloss/vim-javascript syntax package " (and is tested against it exclusively). However, in practice, we make some