How to enable autocompletion for globally registered Vue components in VSCode?

Viewed 84

The autocompletion feature of VSCode works perfectly fine with local registration of Vue components, like so:

<template>
  <base-button />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import BaseButton from '@/components/base/BaseButton.vue';

@Component({
  components: { BaseButton }
})
export default class MyComponent extends Vue {}
</script>

Then, for example, with my base-button which has the props extraClass, id, and type, VSCode shows me all of them properly:

Screenshot: autocompletion of VSCode

But when I register my base components globally in main.ts, like so:

import Vue from 'vue';
import App from './App.vue';

import BaseButton from '@/components/base/BaseButton.vue';
Vue.component('BaseButton', BaseButton);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount('#app');

Vue still works as expected but VSCode now won't show me any autocompletions for those components.

How can I change that? How can I enable VSCode to show me the autocompletion for the props of my self-written components when I register them globally?

0 Answers
Related