Faster and More Accurate TypeScript Support of Vue 3

Volar

Faster and more accurate TypeScript support of Vue 3

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

Volar is a Language Support plugin built specifically for Vue 3. This is based on Composition API to calculate on-demand, so as to achieve performance close to native TypeScript script.

Roadmap: https://github.com/johnsoncodehk/volar/issues/28

I know setup a totally working TS project is not easy (especially for new users), so if you have any question, you can open a Issue, or ask me in Discord.

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

Slots 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 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"
  }
}
```</details> <details><summary>Ignore Checking</summary>

```html
<!-- @vue-ignore -->
<template>
...
</template>

<!-- @vue-ignore -->
<script>
...
</script>

<!-- @vue-ignore -->
<style>
...
</style>

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.

Currently supported languages:

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

Need to disable Vetur to avoid conflicts.

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

Sponsors

If you like this extension and you can afford, please consider to becoming a Sponsor. I can reduce other work and move time to Volar, so this will definitely speed up this project.

Thanks a lot!

Download Details:

Author: johnsoncodehk

Source Code: https://github.com/johnsoncodehk/volar

#vue #vuejs #javascript