-
-
Notifications
You must be signed in to change notification settings - Fork 101
js syntax highlighting in @events and :bindings on template #143
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
This is currently not supported. It is something I would like to have too, so PRs are welcome 🙂 |
well, can you point any resource about creating syntax for vim? I couldn't found much information 😅 (tho I forgot to search in vim's help for it, there should have it, right? anyway, is there other resources?) |
When I got started writing Vim script, I have found Learn Vimscript the Hard Way to be a good resource: Sometimes I refer to existing syntax files at https://github.com/vim/vim/tree/master/runtime/syntax to see how they tackle certain things. In this case you may want to take a look at how php.vim does SQL highlighting inside strings. |
Is anyone working on this at the moment? |
I'm not currently working on this, I... got side tracked in some other stuff, if you want to work on this, feel free, I'd love to see it done too! (sorry for not trying this) |
So, I'm fiddling with this, and for those who want a temporary (possibly permanent) workaround: I was able to make the default delimiter have syntax by having this diff: diff --git a/syntax/vue.vim b/syntax/vue.vim
index 56cdf33..6d379c1 100644
--- a/syntax/vue.vim
+++ b/syntax/vue.vim
@@ -11,6 +11,9 @@ if exists('g:vue_disable_pre_processors') && g:vue_disable_pre_processors
let g:vue_pre_processors = []
endif
+syn include @vueHtmlJavascript syntax/javascript.vim
+unlet b:current_syntax
+
runtime! syntax/html.vim
syntax clear htmlTagName
syntax match htmlTagName contained "\<[a-zA-Z0-9:-]*\>"
@@ -73,6 +76,8 @@ syn keyword htmlSpecialTagName contained template
syn keyword htmlArg contained scoped ts
syn match htmlArg "[@v:][-:.0-9_a-z]*\>" contained
+syn region vueJavascriptInsideStuff start=/{{/ms=e+1 keepend end=/}}/me=s-1 contains=@vueHtmlJavascript
+
syntax sync fromstart
let b:current_syntax = "vue" this is tricky because vue offers the options for you to change the delimiter, so I don't know how to solve this 😅 maybe providing an extra option for an array of custom delimiters for vim-vue. Anyway, I'm having trouble making this work with the string, because as far as I know, the syntax priority for string is overriting the custom javascript thingy for highlighting properties, so I couldn't make it work yet, but this is the farthest I got (if you wanna fiddle with it too): syn region vueJavascriptInsideStuff start=/([@v:][-:.0-9_a-z]*=)\@<="/rs=e+1 keepend end=/"/re=s-1 contains=@vueHtmlJavascript containedin=htmlTag
|
So today I tried doing something again, and I discovered we don't need to import the diff --git a/syntax/vue.vim b/syntax/vue.vim
index 56cdf33..6d379c1 100644
--- a/syntax/vue.vim
+++ b/syntax/vue.vim
@@ -73,6 +76,8 @@ syn keyword htmlSpecialTagName contained template
syn keyword htmlArg contained scoped ts
syn match htmlArg "[@v:][-:.0-9_a-z]*\>" contained
+syn region vueJavascriptInsideStuff start=/{{/ms=e+1 keepend end=/}}/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment
+
syntax sync fromstart
let b:current_syntax = "vue" |
holy, ok ok ok ok, haha, I think I got it working :D I will use it for some days to see if I find anything funky with the solution I came up with, and then I will try opening a PR here :D (so excited 🎉) But for now, if anyone is still really wanting this feature: diff --git a/syntax/vue.vim b/syntax/vue.vim
index 56cdf33..6d379c1 100644
--- a/syntax/vue.vim
+++ b/syntax/vue.vim
@@ -73,6 +76,8 @@ syn keyword htmlSpecialTagName contained template
syn keyword htmlArg contained scoped ts
syn match htmlArg "[@v:][-:.0-9_a-z]*\>" contained
+syn region vueJavascriptInsideStuff start=/{{/ms=e+1 keepend end=/}}/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment
+syn region vueJavascriptInsideStuff start=/\(\([@:]\|v-\)[-:.0-9_a-z]*=\)\@<=["']/ms=e+1 keepend end=/["']/me=s-1 contains=@jsAll containedin=ALL
+
syntax sync fromstart
let b:current_syntax = "vue" this should do the tricky :D P.S.: |
This support: 1. Non-zero length dynamic values (:attr="variable"); 2. Zero length dynamic values (:attr=""); 3. Slots syntax (#name) now have JavaScript syntax also (#default="{ thisHere }"); There is also comments explaining commands and the mustache syntax is considered htmlSpecialChar, because it's easier to see them that way. Closes posva#143
There :D |
Is it possible to have the js syntax hightlighting inside the v-bind and v-on directives and stuff on a template?
The text was updated successfully, but these errors were encountered: