Extension shouldn't attempt to fold :class properties in Vue files

With the following code:

The extension attempts to fold the :classes, resulting in a broken code indentation:

This can currently be fixed by changing the setting inlineFold.regex to:

(class|className)=[`'{"]([^`'"{}]+)[`'"}]

(added a { in the middle part)

Maybe a better solution could be something like this: (class|className)=([`'"{])([^]+?)\2 but you will probably need to update the capture groups indexes in the code

[moalamri]

@wc-davide Yeah react and jsx brought lots of troubles with the template literal. Your colleagues suggested an interesting method 🧐. I will have a look into that. Since you use normal values in the class and far from using jsx. I think you can simply remove the jsx containers {} and use a whitespace. 👍

UPDATE: I’ve tested your colleague method https://regex101.com/r/XXrZHt/1 I’ve completely forgot that we tried that with no success, as you can see in the last line it will stop at the first occurrence of }, because it is not greedy, we also tried to make it greedy, but it consumed any following attribute as well. That’s why i’m writing a simple non-regex method only for Jsx. I have always wondered why most of compilers has an extra plugin for Jsx alone, but I fully understand it now 😵‍💫

[moalamri]

I’m glad you sorted it out 😃 Maybe in upcoming update I will make the default regex with pre whitespace 👍🏻

Feel free to reopen if you have a suggestion.