chore: add option to highlight vue attr differently

This commit is contained in:
yemai
2019-06-18 12:10:13 +08:00
parent c8fd0c85d8
commit a5c9f7e0cf
2 changed files with 39 additions and 9 deletions

View File

@@ -51,8 +51,9 @@ Ex:
| `g:vim_vue_plugin_use_pug`\* | Enable `vim-pug` pug syntax for `<template lang="pug">`. | 0 | | `g:vim_vue_plugin_use_pug`\* | Enable `vim-pug` pug syntax for `<template lang="pug">`. | 0 |
| `g:vim_vue_plugin_use_less` | Enable less syntax for `<style lang="less">`. | 0 | | `g:vim_vue_plugin_use_less` | Enable less syntax for `<style lang="less">`. | 0 |
| `g:vim_vue_plugin_use_sass` | Enable sass/scss syntax for `<style lang="sass">`(or scss). | 0 | | `g:vim_vue_plugin_use_sass` | Enable sass/scss syntax for `<style lang="sass">`(or scss). | 0 |
| `g:vim_vue_plugin_debug` | Echo debug message in `messages` list. Useful to debug if unexpendted indents occur. | 0 |
| `g:vim_vue_plugin_has_init_indent` | Initially indent one tab inside `style/script` tags. | 0 for `.vue`. 1 for `.wpy` | | `g:vim_vue_plugin_has_init_indent` | Initially indent one tab inside `style/script` tags. | 0 for `.vue`. 1 for `.wpy` |
| `g:vim_vue_plugin_highlight_vue_attr` | Highlight vue attributes differently. | 1 |
| `g:vim_vue_plugin_debug` | Echo debug message in `messages` list. Useful to debug if unexpendted 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 could be added in `~/.vim/syntax` or `$VIM/vimfiles/syntax`. \*: Vim may be slow if the feature is enabled. Find a balance between syntax highlight and speed. By the way, custom syntax could be added in `~/.vim/syntax` or `$VIM/vimfiles/syntax`.

View File

@@ -1,13 +1,29 @@
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"
" Config {{{
"
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
let s:highlight_vue_attr = !exists("g:vim_vue_plugin_highlight_vue_attr")
\ || g:vim_vue_plugin_highlight_vue_attr == 1
")}}}
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"
" Syntax highlight {{{
"
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
syntax match VueComponentName containedin=htmlTagN '\v\C<[a-z0-9]+(-[a-z0-9]+)+>' syntax match VueComponentName containedin=htmlTagN '\v\C<[a-z0-9]+(-[a-z0-9]+)+>'
syntax match VueComponentName containedin=htmlTagN '\v\C<([A-Z][a-zA-Z0-9]+)+>' syntax match VueComponentName containedin=htmlTagN '\v\C<([A-Z][a-zA-Z0-9]+)+>'
syntax match VueAttr '\v(\S)@<![v:\@][^\=]*(\=\"[^"]*\")?' syntax match VueAttr '\v(\S)@<![v:\@][^\=]*(\=\"[^"]*\")?'
\ containedin=htmlTag \ containedin=htmlTag
\ contains=VueKey,VueValue \ contains=VueKey,VueQuote
syntax match VueKey contained '\v[v:\@][^\=]+' syntax match VueKey contained '\v[v:\@][^\=]+'
syntax region VueQuote contained
\ start='"' end='"' contains=VueValue
syntax match VueValue contained '\v\"\zs[^"]*\ze\"' syntax match VueValue contained '\v\"\zs[^"]*\ze\"'
\ contains=VueInject,javaScriptStringS,javaScriptRepeat \ contains=VueInject,javaScriptStringS,javaScriptRepeat,javaScriptOperator
syntax match VueInject contained '\v\$\w*' syntax match VueInject contained '\v\$\w*'
@@ -27,20 +43,33 @@ syntax region VueExpression
" Wepy directive syntax " Wepy directive syntax
syntax match VueAttr '\v(\S)@<!wx[^\=]+(\=\"[^"]*\")?' syntax match VueAttr '\v(\S)@<!wx[^\=]+(\=\"[^"]*\")?'
\ containedin=htmlTag \ containedin=htmlTag
\ contains=VueKey,VueValue,VueInject \ contains=VueKey,VueQuote
syntax match VueKey contained '\vwx[^\=]+' syntax match VueKey contained '\vwx[^\=]+'
syntax match VueCustomTag containedin=htmlTagN '\v<(view|text|block|image)>' syntax match VueCustomTag containedin=htmlTagN '\v<(view|text|block|image)>'
syn region javaScriptStringS start=+'+ skip=+\\\\\|\\'+ end=+'\|$+ contains=javaScriptSpecial,@htmlPreproc syn region javaScriptStringS
syn keyword javaScriptRepeat while for do in \ start=+'+ skip=+\\\\\|\\'+ end=+'\|$+ contained
syn region javaScriptStringD
\ start=+"+ skip=+\\\\\|\\"+ end=+"\|$+ contained
syn keyword javaScriptRepeat in contained
syn match javaScriptOperator '[\!\|\&\+\-\<\>\=\%\/\*\~\^]\{1}' contained
highlight default link VueAttr Comment highlight default link VueAttr htmlTag
highlight default link VueKey Type if s:highlight_vue_attr
highlight default link VueValue Function highlight default link VueKey Type
highlight default link VueQuote VueAttr
highlight default link VueValue Function
else
highlight default link VueKey htmlArg
highlight default link VueQuote String
highlight default link VueValue String
endif
highlight default link VueInject Constant highlight default link VueInject Constant
highlight default link VueBrace Type highlight default link VueBrace Type
highlight default link VueComponentName Statement highlight default link VueComponentName Statement
highlight default link VueCustomTag Statement highlight default link VueCustomTag Statement
highlight default link javaScriptRepeat Statement highlight default link javaScriptRepeat Statement
highlight default link javaScriptStringS String highlight default link javaScriptStringS String
"}}}
" vim: fdm=marker