Skip to content

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

Open
vhoyer opened this issue Nov 7, 2019 · 9 comments · May be fixed by #150
Open

js syntax highlighting in @events and :bindings on template #143

vhoyer opened this issue Nov 7, 2019 · 9 comments · May be fixed by #150

Comments

@vhoyer
Copy link

vhoyer commented Nov 7, 2019

Is it possible to have the js syntax hightlighting inside the v-bind and v-on directives and stuff on a template?

<template>
  <label :aria-label="`omg look at ${ myProp }`"> <!-- this -->
    <button @click="myMethod('static', $event)"> <!-- this too -->
      {{ bla() /* <- this also */ }}
    </button>
  </label>
</template>
@adriaanzon
Copy link
Collaborator

This is currently not supported. It is something I would like to have too, so PRs are welcome 🙂

@vhoyer
Copy link
Author

vhoyer commented Dec 19, 2019

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?)

@adriaanzon
Copy link
Collaborator

When I got started writing Vim script, I have found Learn Vimscript the Hard Way to be a good resource:
http://learnvimscriptthehardway.stevelosh.com/chapters/45.html
http://learnvimscriptthehardway.stevelosh.com/chapters/46.html
http://learnvimscriptthehardway.stevelosh.com/chapters/47.html

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.

@khoahuynhdev
Copy link

Is anyone working on this at the moment?

@vhoyer
Copy link
Author

vhoyer commented Mar 17, 2020

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)

@vhoyer
Copy link
Author

vhoyer commented May 29, 2020

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"

image

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

btw, @adriaanzon thanks for pointing out the resources, I learned a lot 😄

@vhoyer
Copy link
Author

vhoyer commented Aug 12, 2020

So today I tried doing something again, and I discovered we don't need to import the vueHtmlJavascript thingy, because there is the rule @jsAll already being defined, somewhere I couldn't find where 😅. Also, it's important to add that last part containedin=ALLBUT,htmlComment, because otherwise when you use a link or a strong tag, the syntax was being overwritten;

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"

@vhoyer
Copy link
Author

vhoyer commented Aug 12, 2020

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.:
Oh, and I super accept suggestions for the name of this region because vueJavascriptInsideStuff doesn't seem fitting 😅

vhoyer added a commit to vhoyer/vim-vue that referenced this issue Aug 15, 2020
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
@vhoyer vhoyer linked a pull request Aug 15, 2020 that will close this issue
@vhoyer
Copy link
Author

vhoyer commented Aug 15, 2020

There :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants