Problem with syntax highlighting for non typescript project

[lukaskleinschmidt]

I'm having some trouble getting syntax highlighting work for a non typescript project.
Strangely enough the error only occurs when defining props using defineProps.

vscode: v1.66.2
volor: v0.34.6

[johnsoncodehk]

With lang="ts" it is working, but with js type calculation is limited.

// test.js

import { defineComponent } from 'vue';

const A = defineComponent({
    setup() {
        return {
            HelloWorld: HelloWorld,
        };
    },
});
const B = defineComponent({
    props: [],
    setup() {
        return {
            HelloWorld: HelloWorld,
        };
    },
});

type A_Keys = keyof InstanceType<typeof A>; // "HelloWorld" | "$" | "$data" | "$props" | "$attrs" | "$refs" | "$slots" | "$root" | "$parent" | "$emit" | "$el" | "$options" | "$forceUpdate" | "$nextTick" | "$watch"
type B_Keys = keyof InstanceType<typeof B>; // string | number | symbol

[sirichart]

So is there any fix for this? or is there any way to temporarily turn off the red highlighting on the component tag. Thank you!

[lukaskleinschmidt]

@sirichart downgrading volar to 0.34.4 worked for me for now.

[sirichart]

Ah that's great, thank you for this!

[flatoy]

After the publisher was changed to Vue I'm not able to downgrade anymore.

[johnsoncodehk]

@vhflat You can download history versions in https://marketplace.visualstudio.com/items?itemName=Vue.volar&ssr=false#version-history.

https://marketplace.visualstudio.com/_apis/public/gallery/publishers/Vue/vsextensions/volar/0.34.4/vspackage

[itpropro]

So is there any fix for this? or is there any way to temporarily turn off the red highlighting on the component tag. Thank you!

Just use lang="ts". It's just for that component and Vue 3 without Typescript is just half the fun ;)