Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Vue Language Features (Volar)New to Visual Studio Code? Get it now.

Vue Language Features (Volar)

Vue

|
831,963 installs
| (56) | Free
Language support for Vue 3
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Vue Language Features

⚡ Fast Vue Language Support Extension

Plugin's page on Visual Studio Marketplace

VueLF 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.

[Tips]

Quick Start

  • create-vite
  • Vitesse
  • vue3-eslint-stylelint-demo (Volar + ESLint + stylelint + husky)
  • volar-starter (For bug report and experiment features testing)

Usage

Setup for Vue 2
  1. Add @vue/runtime-dom

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

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

// package.json
{
  "devDependencies": {
    "@vue/runtime-dom": "latest"
  }
}
  1. Remove Vue.extend

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

Here is a compatibility table for different ways of writing the script blocks:

Component options type-checking in <script> Interpolation type-checking in <template> Cross-component props type-checking
export default { ... } with JS Not supported Not supported Not supported
export default { ... } with TS Not supported Supported but deprecated Supported but deprecated
export default Vue.extend({ ... }) with JS Not supported Not supported Not supported
export default Vue.extend({ ... }) with TS Limited (supports data types but not props types) Limited Not supported
export default defineComponent({ ... }) Supported Supported Supported
Class component Supported Supported with additional code (#21) Supported with additional code

Note that you can use defineComponent even for components that are using the Options API.

  1. Support for Vue 2 template

Volar preferentially supports Vue 3. Vue 3 and Vue 2 templates have some differences. You need to set the experimentalCompatMode option to support the Vue 2 templates.

// tsconfig.json
{
  "compilerOptions": {
    // ...
  },
  "vueCompilerOptions": {
    "experimentalCompatMode": 2,
    "experimentalTemplateCompilerOptions": {
      "compatConfig": { "MODE": 2 } // optional
    }
  }
}
  1. remove .d.ts files if they exist.

For projects generated by the Vue CLI, .d.ts files are included. Remove these files.

rm src/shims-tsx.d.ts src/shims-vue.d.ts
Define Global Components

PR: https://github.com/vuejs/vue-next/pull/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' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

export {}

Notes

Vetur

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

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. There are also snippets on the VSCode Marketplace, such as Sarah Drasner's Vue VSCode Snippets, if you prefer ready-made snippets without customization.

If VSCode gives an error for class and slot like this:

This is because one of the packages installed in your project uses @types/react which breaks some parts of Volar.

Please see the following solutions:

  • https://github.com/johnsoncodehk/volar/discussions/592
  • https://github.com/johnsoncodehk/volar/discussions/592#discussioncomment-1763880

Recursive components

Volar can't typecheck recursive components out of the box due to TS limitation. But there's a workaround, you can explicitly specify component's props like so:

Bar.vue

<template>
  <Bar :a="'wrong'" />
</template>

<script setup lang="ts">
import { defineAsyncComponent, type DefineComponent } from 'vue'

interface Props {
  a: number
}

const Bar = defineAsyncComponent<DefineComponent<Props>>(
  () => import('./Bar.vue') as any
)
defineProps<Props>()
</script>

Sponsors

Credits

  • vscode-extension-samples shows all the knowledge required to develop the extension.
  • angular shows how TS server plugin working with language service.
  • Syntax highlight is rewritten base on vue-syntax-highlight.
  • vscode-fenced-code-block-grammar-injection-example shows how to inject vue syntax highlight to markdown.
  • Out of the box formatting working by (If you would like to use other formatters, checkout https://github.com/johnsoncodehk/volar-plugins):
    • vscode-html-languageservice: html
    • vscode-css-languageservice: css, less, scss, postcss
    • pug-beautify: pug
    • typescript: js, ts, jsx, tsx
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2022 Microsoft