geohotios/volar

⚡ Fast Vue Language Support Extension

Volar

⚡ Fast 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 optimize performance similar to the native TypeScript language service.

🛠️ This project is still in refactoring to make contributing easier.

[Roadmap] [Tips] [Discord]

Volar does not include ESLint and Prettier, but the official ESLint and Prettier extensions support Vue, so you could install these yourself if needed.

If using Vetur's Customizable Scaffold Snippets, recommend use Snippet Generator convert to VSCode Snippets.

By-product

• vue-tsc: Type-Checking on command line
• typescript-vue-plugin: See #169.
• vscode-vue-languageservice : Generic language server module for Vue
• vscode-pug-languageservice: Generic language server module for Pug
• vscode-typescript-languageservice: Generic language server module for TypeScript

Sponsors

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

Quick Start

• vite/create-app
• Vitesse

Using

Global components support (Updated at 5/4/2021)

See: vuejs/core#3399

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

For Global components, you need to have Vue 3 GlobalComponents interface definition, for example:

// components.d.ts
declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

export {}

v-slot support

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:

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

declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof RouterLink & {
      __VLS_slots: {
        default: UnwrapRef<ReturnType<typeof useLink>>
      }
    }
    RouterView: typeof RouterView & {
      __VLS_slots: {
        default: {
          Component: VNode
          route: RouteLocationNormalized & { href: string }
        }
      }
    }
  }
}

export {}

Work with Vue 2?

This tool required Vue 3 types from the @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"
  }
}

Note

You need to disable Vetur to avoid conflicts.

Recommended use css / less / scss as <style> language, because these base on vscode-css-languageservice to provide reliable language 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 others.

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

tsconfig.json / jsconfig.json is required.

Also required "strict": true and "moduleResolution": "node".

__VLS_slots will change in future, see: #40