Volar

Faster and more acurrate TypeScript support of Vue 3

https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

Some interesting features:

Components service

By default, Local components, Built-in components, native html elements Type-Checking are active.

For Global components, you need to add the __VLS_GlobalComponents interface definition, for example:

// shims-volar.d.ts
import { RouterLink, RouterView } from 'vue-router'

declare global {
	interface __VLS_GlobalComponents {
		'RouterLink': typeof RouterLink
		'RouterView': typeof RouterView
	}
}

v-slot Type-Checking

v-slot Type-Checking will auto service all .vue files under the project, but for third party libraries, you need to define the slot types, for example:

// shims-volar.d.ts
import { RouterLink, RouterView, useLink, RouteLocationNormalized } from 'vue-router'
import { UnwrapRef, VNode } from 'vue'

declare global {
	interface __VLS_GlobalComponents {
		'RouterLink': typeof RouterLink & {
			__VLS_slots: {
				default: UnwrapRef<ReturnType<typeof useLink>>
			}
		}
		'RouterView': typeof RouterView & {
			__VLS_slots: {
				default: {
					Component: VNode
					route: RouteLocationNormalized & { href: string }
				}
			}
		}
	}
}

Work with Vue 2?

This tool uses Vue 3 types from '@vue/runtime-dom' module to calculate completion.

Vue 3 in itself includes the package '@vue/runtime-dom'. For Vue 2 you will have to install this package yourslef:

{
  "devDependencies": {
    "@vue/runtime-dom": "latest"
  }
}

Note

Syntax highlighting is based on vue-syntax-highlight

If your rename location includes both a .ts and a .vue file. Please perform the rename operation on the .vue file, otherwise the rename location in the .vue wouldn't be found.

Click <template> tag to use pug convert tool.