vue.jsintellisensevuejs3vetur

How to prevent intellisense from automatically adding column before prop (Vue3)

I've been battling this issue for a while now. Does anyone know how to prevent intellisense (in VSCode) from adding column on autocomplete?

I have my custom component and this is how my intellisense autocompletes my component's props.

<script lang="ts">
 import { toRefs, defineComponent } from 'vue';

 export default defineComponent({
   name: 'Grid',
   props: {
     alignItems: {
      type: String,
      default: null,
      validator: (val: string): boolean => ['start', 'center', 'end', 'stretch'].includes(val),
   },
   ...
 }
</script>

enter image description here

UPDATE

So I was able to generate the correct IntelliSense autocomplete after generating Tags and Attributes for each component (followed this step-by-step solution for autogenerating tags and attributes for custom components).

NOW

How do I disable autocomplete that is incorrect?

enter image description here

UPDATE Uninstalled Vetur and switched to this volar and everything works like a charm with Typescript.

Solution

  • Too much overhead with Vetur led me to just simply switch to Volar extension which supports Typescript out of the box and this resolved all my issues