skip to content

Which editor tooling does Vue 3 officially provide for TypeScript in single-file components, and how does it relate to vue-tsc?

level: juniorimportance: should knowfreq 40%

answer

  1. previously called Volar
  2. language server plus TS plugin
  3. same core as vue-tsc
  4. disable the Vue 2 extension

basics

~20 s

The official Vue - Official extension (previously Volar) bundles the Vue language server and a TypeScript plugin that lets the editor's TypeScript service understand .vue files. It shares its core with vue-tsc, so editor and CLI checks normally agree.

solid answer

~40 s

For VS Code the Vue docs recommend **Vue - Official** (marketplace ID `Vue.volar`, previously Volar). It replaces **Vetur**, the Vue 2 extension, which should be disabled in Vue 3 projects. The extension ships `@vue/language-server`, which provides completion, diagnostics and navigation for SFCs, and works with `@vue/typescript-plugin` running inside TypeScript's own `tsserver`, so `.ts` files can import `.vue` files with real types. Other editors can use the same language server over the Language Server Protocol, and WebStorm has built-in support for it. Both the editor tooling and `vue-tsc` are built on `@vue/language-core`, which is why they normally report the same errors. The extension's README recommends using the workspace TypeScript version (`typescript.tsdk`), so the editor and CI run the same compiler.

go deeper

for a junior

Know the names: Vue - Official (formerly Volar) for Vue 3, Vetur only for Vue 2, and vue-tsc for the command line.

for a middle

Explain the architecture: a Vue language server plus a TypeScript plugin inside tsserver, both on @vue/language-core, which vue-tsc also uses.

for a senior

Keep editor and CI in agreement by standardising the workspace TypeScript version, pinning vue-tsc, and removing conflicting extensions from the team's setup.

for a principal

Treat editor configuration as project configuration: commit the workspace settings and recommended extensions so every developer sees the same errors as CI.

## The pieces of Vue's language tooling Vue's editor and command-line type tooling lives in one repository, `vuejs/language-tools`. The parts that matter for a developer: | Package | Role | |---|---| | `@vue/language-core` | turns SFCs into TypeScript virtual code; shared by everything below | | `@vue/language-server` | a Language Server Protocol server for `.vue` files: completion, diagnostics, navigation | | `@vue/typescript-plugin` | a TypeScript language service plugin that makes `tsserver` understand `.vue` files | | Vue - Official (VS Code extension) | bundles the language server and wires in the TypeScript plugin | | `vue-tsc` | the command-line checker, a wrapper around `tsc` | ## The VS Code extension The Vue TypeScript guide recommends VS Code with **Vue - Official**, previously called **Volar**, marketplace ID `Vue.volar`. Its README lists what it adds for SFCs: - syntax highlighting for every block and language inside a `.vue` file; - completion for components, props, events, slots and directives; - full TypeScript type inference, including expressions in templates; - real-time Vue compiler diagnostics, go to definition, find references, rename. The guide also warns that it **replaces Vetur**, the official extension for Vue 2. If Vetur is installed, disable it in Vue 3 projects, because the two conflict. ## How the editor gets TypeScript right The language server does not reimplement TypeScript. It collaborates with the TypeScript language service through `@vue/typescript-plugin`, which runs inside the editor's `tsserver`: 1. `tsserver` loads the plugin, so it can resolve and type `.vue` imports in `.ts` files. 2. The Vue language server asks `tsserver` for type information when it needs it for templates. 3. Both sides use `@vue/language-core`'s virtual code, so a template error and a `.ts` error come from the same type model. ## Other editors - **LSP editors** (Neovim, Sublime Text, Emacs and others) run `vue-language-server --stdio`, optionally with `--tsdk` pointing at the project's TypeScript `lib` folder. - **WebStorm** and related IDEs support Vue and TypeScript out of the box, with built-in use of the Vue Language Server since version 2023.2 according to the Vue guide. ## What the tooling gives you day to day Beyond red squiggles, the shared type model powers features that matter in interviews about productivity: 1. **Prop and event completion** on child components, derived from `defineProps` and `defineEmits`. 2. **Go to definition** from a component tag in a template to the component's file, and from a prop to its declaration. 3. **Rename** of a prop or component across `.vue` and `.ts` files, because `tsserver` sees both through the plugin. 4. **Hover types** for template expressions, so you can see that a ref is unwrapped to its value type in the template. These only work well when the project's tsconfig includes the `.vue` files and the editor uses the right TypeScript version, which is also what keeps its diagnostics in line with CI. ## Keeping the editor and CI in agreement Because the extension and `vue-tsc` share `@vue/language-core`, the same file should produce the same errors in both. When they disagree, check: - **TypeScript version**: the README recommends using the workspace version: ```json { "typescript.tsdk": "node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true } ``` - **Tool versions**: the extension updates on its own schedule, while `vue-tsc` is pinned by the lockfile. - **Configuration**: both read `vueCompilerOptions` from the `tsconfig` that includes the file; a different or missing `tsconfig` changes the result. The extension's troubleshooting steps include reloading the window, running `npx vue-tsc --noEmit` from the command line to compare, and reading the Vue Language Server output channel.

  • A developer on a Vue 3 project sees duplicate or conflicting diagnostics in .vue files. What is the first thing to check?
    Whether Vetur, the Vue 2 extension, is still enabled next to Vue - Official. The Vue guide says Vue - Official replaces Vetur and that Vetur should be disabled in Vue 3 projects. After that, restart the Vue language server and confirm the editor uses the workspace TypeScript version.
  • Why does the Vue - Official README recommend pointing the editor at the workspace TypeScript version?
    Otherwise the editor's `tsserver` may use the TypeScript bundled with the editor, while `vue-tsc` in CI runs the project's installed version. Different versions can infer types differently and report different errors. Setting `typescript.tsdk` to `node_modules/typescript/lib` makes both run the same compiler.

saying these in an interview costs you the question

  • Vetur is the recommended extension for Vue 3 and TypeScript.
  • The Vue editor extension reimplements TypeScript's type checker.
  • Editor diagnostics and vue-tsc come from unrelated code bases.
  • The Vue language server only works inside VS Code.
  • Keeping both Vetur and Vue - Official enabled gives better coverage.