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 everything on-demand, to implement native TypeScript language service level performance.

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

[Tips] [Discord]

Quick Start

create-vite
Vitesse
volar-starter (For bug report and experiment features testing)

Community's Language Client Implements

coc.nvim: https://github.com/yaegassy/coc-volar

By-product

@volar/server: Bridging module for LSP <-> vscode-vue-languageservice.
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

Using

Setup for Vue 2

Add @vue/runtime-dom

This extension required Vue 3 types from the @vue/runtime-dom.

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

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

Remove Vue.extend

Template type-checking do not support with Vue.extend, you can use composition-api, vue-class-component, or export default { ... } instead of export default Vue.extend.

Add tsconfig.json / jsconfig.json if you don't have
Support Vue 2 template

Volar preferentially supports Vue 3. Vue 3 and Vue 2 template has some different. You need to set the experimentalCompatMode option to support Vue 2 template.

// tsconfig.json
{
  "compilerOptions": {
    ...
  },
  "vueCompilerOptions": {
    "experimentalCompatMode": 2
  },
}

Setup for Vue 3

Add tsconfig.json / jsconfig.json if you don't have

Define Global Components

PR: vuejs/core#3399

Local components, Built-in components, native HTML elements Type-Checking is available with no configuration.

For Global components, you need to define GlobalComponents interface, for example:

// components.d.ts

// declare module '@vue/runtime-core' works for vue 3
// declare module 'vue' works for vue2 + vue 3
declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

export {}

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 for now.

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

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.

Perfumere/volar