Something different from webstorm

[xiaosenzhang]

use vue2

webstorm

vscode

[eenaree]

Thank you for reporting the issue.

I don't actually know much about using Vue, as I mostly use React,
Still, since it's JavaScript-based, I was able to understand the context of the code to some extent.

Project Setting

vue create my-app > use vue2

I also applied the settings for vue2 in the Volar extension.

Result

When I followed your screenshot exactly, I got the error that properties like loading, serviceList, route, etc. don't exist.

Most error messages looked like this.

Property 'loading' does not exist on type 'Vue3Instance<{}, Readonly<ExtractPropTypes<{}>>, Readonly<ExtractPropTypes<{}>>, {}, {}, true, ComponentOptionsBase<any, any, any, any, ... 5 more ..., any>> & ... 4 more ... & Readonly<...>'.

In your code, you seem to have left out the part where you pass it as a prop. (my guess)

Once I passed in the expected value, the token's color changed to the expected semantic color.
This is possible because in the previous results, the types of values such as loading, serviceList, and route were inferred to be any, but after the following code change, the types of the values were inferred to be arbitrarily passed arrays and objects.

Changed Result

If your code still differs from my code results, I'd appreciate it if you could tell me more about your findings.

Also, if you use Command Palette (Ctrl+Shift+P) > Developer: Inspect Editor Tokens and Scopes, you can get information about the token colors for Array, serviceList, etc. that you are questioning.

The color error in the Array constructor token is... well... temporary.
Since Array is a built-in class, this is not the same as not passing a value earlier.
It would be nice to run a command to check the color of the token, and let us know the result of this value.

[xiaosenzhang]

Project Setting
vue create my-app > use vue2 with ts

use Vetur Pine Wu extension

package.json:
npm install --save-dev vue-property-decorator@8.4.2

[eenaree]

Thanks for providing more details about project settings. It helped me figure out the cause of the bug.

my and your vue language support extensions are different and that's where the bug came from.

use Volar: typescript

use Vetur: vue-html

VSCode can classify tokens based on TextMate and assign different color values to them based on their value.
If semantic syntax highlighting is enabled, it takes precedence over this.
The colors of the tokens you are questioning are colored by semantic syntax highlighting.

But using Vetur extension, you can see that semantic highlighting is not applied.

The Vetur extension separately configures a custom language called vue-html, and syntax highlighting for templates appears to be supported based on TextMate rather than semantics.
Only the script part seems to have semantic syntax highlighting applied. vuejs/vetur#2802

I don't think this is something I can fix.

[xiaosenzhang]

ok, thankyou

[eenaree]

Since the theme also relies on semantic highlighting, I don't think I've considered the case where semantic highlighting isn't applied.

In fact, even if this wasn't your problem, it should have been fixed.

When semantic highlighting is not applied,

before (current) :

after fix :

Also, If we distinguish between constant and writable variables, things change a bit more. (but, methods are not controllable.)

How it works

This works because when semantic highlighting is not applied, properties like loading and serviceList are classified as writable variables in the editor.
The variable tab used in the loop for serviceList becomes a readonly variable when semantic highlighting is applied, but is otherwise a writable variable. When used with tab.property, it also refers to an object, not a writable variable.

Conclusion

Anyway, it's not easy to control color with TextMate alone.

In situations where semantic highlighting is not applied, your code looks like this is the best result for now.

But when semantic highlighting is applied, readonly and writable variables still have the same color.
(The reason for unifying the colors is that it was difficult to apply the same standards from the WebStorm theme to VSCode.)
This is just a workaround for when semantic highlighting is not applied.

What do you think of my suggestion?