VimPlug/vim-vue-plugin
1
0
Fork 0
mirror of https://github.com/leafOfTree/vim-vue-plugin.git synced 2025-12-07 21:24:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: add option to highlight vue attr differently

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
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_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_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_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`.

45
syntax/vue-html.vim
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-Z][a-zA-Z0-9]+)+>'
syntax match VueAttr '\v(\S)@<![v:\@][^\=]*(\=\"[^"]*\")?'
\ containedin=htmlTag
\ contains=VueKey,VueValue
\ contains=VueKey,VueQuote
syntax match VueKey contained '\v[v:\@][^\=]+'
syntax region VueQuote contained
\ start='"' end='"' contains=VueValue
syntax match VueValue contained '\v\"\zs[^"]*\ze\"'
\ contains=VueInject,javaScriptStringS,javaScriptRepeat
\ contains=VueInject,javaScriptStringS,javaScriptRepeat,javaScriptOperator
syntax match VueInject contained '\v\$\w*'
@@ -27,20 +43,33 @@ syntax region VueExpression
" Wepy directive syntax
syntax match VueAttr '\v(\S)@<!wx[^\=]+(\=\"[^"]*\")?'
\ containedin=htmlTag
\ contains=VueKey,VueValue,VueInject
\ contains=VueKey,VueQuote
syntax match VueKey contained '\vwx[^\=]+'
syntax match VueCustomTag containedin=htmlTagN '\v<(view|text|block|image)>'
syn region javaScriptStringS start=+'+ skip=+\\\\\|\\'+ end=+'\|$+ contains=javaScriptSpecial,@htmlPreproc
syn keyword javaScriptRepeat while for do in
syn region javaScriptStringS
\ 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 VueKey Type
highlight default link VueValue Function
highlight default link VueAttr htmlTag
if s:highlight_vue_attr
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 VueBrace Type
highlight default link VueComponentName Statement
highlight default link VueCustomTag Statement
highlight default link javaScriptRepeat Statement
highlight default link javaScriptStringS String
"}}}
" vim: fdm=marker