The highlighting of PascalCase and kebab-case cannot be distinguished

[liudid]

No description provided.

[liudid]

Using Vue-Official in VsCode, it is not possible to distinguish between the highlighting of PascalCase and kebab-case.

[liudid]

Vue-Official effect

[liudid]

Vetur effect

[liudid]

Why can't volar distinguish highlights?

[so1ve]

Why do you want to distinguish highlights?

[liudid]

Why do you want to distinguish highlights?

In the previous use of Vetur, it could distinguish between the highlighted colors of PascalCase and kebab-case. So I choose to use kebab-case when using third-party component libraries and PascalCase when using custom components to quickly distinguish the different sources of components by highlighting them. But when I switched from Vetur to Volar, I found that this feature that had helped me so much was gone.

[liudid]

Why do you want to distinguish highlights?

Distinguishing native HTML elements by using PascalCase is mentioned in vuejs.org. I wish Volar could distinguish div and MyDiv with different highlighted colors like Vetur does.

[so1ve]

I wish Volar could distinguish div and MyDiv with different highlighted colors like Vetur does.

It does. Components have different highlight colors.

[Vasily257]

It doesn't work for me eathier:

1. In the first screenshot I'm using the official extension, and the highlight isn't working.
2. In the second screenshot I'm using a third-party extension, and the highlight is working.

[XioDone]

This is not a problem of PascalCase and kebab-case styles, it may be caused by your theme, you can try switching themes.

The same issue occurred in a previous version a long time ago, see #2252, return to the 1.x version of the token and it should behave normally.