⚡ 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]

This company is sponsoring this project to improve your DX. 💪

Leniolabs_ Scale your Front-end development with our unique approach https://www.leniolabs.com/ ・@Leniolabs_ ・[email protected]

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

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

• @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

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

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

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

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.