Volar

⚡ The Fastest Vue Language Support Extension

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

Volar is a Language Support plugin built specifically for Vue 3. It's based on @vue/reactivity to calculate TypeScript on-demand to optimization performance close to native TypeScript language service.

[Roadmap] [Tips] [Discord]

🛠️ This project is still refactoring to make it easier for contribute.

Quick Start

https://github.com/johnsoncodehk/vue-vite-volar

Using

Components services

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

For Global components, you need to have __VLS_GlobalComponents interface definition or component registeres call, for example:

• __VLS_GlobalComponents interface definition:

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

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

• component registeres call:

// my-global-components-plugin.ts
import Foo from '@/my-global-components/foo.vue'
import Bar from '@/my-global-components/bar.vue'

export const plugin: Plugin = {
    install(app) {
        app.component('f-o-o', Foo);
        app.component('BAR', Bar);
    }
}

/* The following code will be automatically generated */
declare global {
	interface __VLS_GlobalComponents {
		'f-o-o': typeof Foo
		'BAR': typeof Bar
	}
}

v-slot services

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 required Vue 3 types from @vue/runtime-dom module.

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"
  }
}

Ignore Checking

<template>
checking...
</template>

<script>
checking...
</script>

<!-- @vue-ignore -->
<style>
not checking!
</style>

Note

Supported languages:

• template: html, pug
• script: js, ts, jsx, tsx
• style: css, scss, less, postcss (stylus, sass has limited support)

If use postcss / stylus / sass, you need to install additional extension for syntax highlighting. I tried these and it works, you can also choose other.

• postcss: language-postcss.
• stylus: language-stylus
• sass: Sass

You need to disable Vetur to avoid conflicts.

tsconfig.json / jsconfig.json is required. And usually also need "strict": true.

If use Vitepress, you may need to setup "include": ["src/**/*", "src/.vitepress/**/*"].

__VLS_GlobalComponents and __VLS_slots will change in future, see: #40

Sponsors

If you like this extension, please consider to becoming a Sponsor. Thank you. :)