Description
Specs:
VSCode: v1.87.0 (Universal)
Vue Official Extension: v2.0.5
After the most recent update said to remove:
TypeScript Vue Plugin (Volar) v1.8.27
Issue:
When the VSCode setting is set to "html.format.wrapAttributes": "force-expand-multiline", it is causing Typescript code to be considered "javascript" in the scopes and is not recognizing things via the lang="ts" attribute.
In this example it is using the correct scopes.
textmate scope for Foo
entity.name.type.interface.ts
meta.interface.ts
source.ts
source.vue
textmate scope for Bar
entity.name.type.alias.ts
meta.type.declaration.ts
source.ts
source.vue
<script setup lang="ts">
export interface Foo {
bar: string;
}
export type Bar = {
foo: string;
}
</script>But when VSCode wraps the script tag attributes (which it did not do before removing Volar using the same html.format.wrapAttributes setting) causes the following to have scopes as:
textmate scope for Foo
entity.name.type.interface.js
meta.interface.js
source.js
source.vue
textmate scope for Bar
entity.name.type.alias.js
meta.type.declaration.js
source.js
source.vue
<script
setup
lang="ts"
>
export interface Foo {
bar: string;
}
export type Bar = {
foo: string;
}
</script>It also does the same for the style blocks. Causing scss scopes to be css.
Additional Problem
Because of this incorrect scope assignment, it causes syntax highlighting issue for VSCode themes using the correct scopes.