Volar

Faster and more accurate TypeScript support of Vue 3

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

Some interesting features:

• Format all scripts command (v0.13.5 added)
• Verify all scripts command (v0.13.3 added)
• v-slot Type-Checking (v0.12.1 added)
• Component props auto completion (v0.11.6 added)
• Emits Type-Checking (v0.11.4 added)
• Interpolation formatting + commenting (v0.11.2 added)
• Native html tag services (v0.11.0 added)
• <script setup> support (v0.10.0 added)
• Unused highlight for setup() return properties (v0.7.0 added)
• pug-html convert tool
• Asset url link jump
• css module services
• Pug interpolation services
• Component props services (v0.5.0 added)
• Component tag services
• Multi root support

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 yourself:

{
  "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.

Currently supported languages:

• template: html, pug
• script: js, ts, jsx, tsx
• style: css, scss, less