@vue/typescript-plugin

@vue/typescript-plugin

A TypeScript language service plugin that enables tsserver to understand .vue files. This plugin is used by @vue/language-server to collaborate with the TypeScript language service.

Installation

npm install @vue/typescript-plugin --save-dev

Configuration

VSCode

Create .vscode/settings.json in your project root:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

tsconfig.json

{
  "compilerOptions": {
    "plugins": [
      { "name": "@vue/typescript-plugin" }
    ]
  }
}

Provided Features

This plugin registers the following Vue-specific commands for tsserver:

Command	Description
_vue:projectInfo	Get project information
_vue:collectExtractProps	Collect extractable props
_vue:getImportPathForFile	Get import path for a file
_vue:getAutoImportSuggestions	Get auto-import suggestions
_vue:resolveAutoImportCompletionEntry	Resolve auto-import completion entry
_vue:isRefAtPosition	Check if position is a ref
_vue:getComponentDirectives	Get component directives
_vue:getComponentMeta	Get component metadata
_vue:getComponentNames	Get component name list
_vue:getComponentProps	Get component props
_vue:getComponentSlots	Get component slots
_vue:getElementAttrs	Get element attributes
_vue:getElementNames	Get element name list
_vue:resolveModuleName	Resolve module name
_vue:documentHighlights-full	Document highlights
_vue:encodedSemanticClassifications-full	Semantic classifications
_vue:quickinfo	Quick info

How it Works

This plugin is created using createLanguageServicePlugin from @volar/typescript. It:

• Reads vueCompilerOptions from tsconfig.json
• Creates a Vue language plugin to process .vue files
• Intercepts and handles TypeScript language service requests
• Registers Vue-specific protocol handlers

Related Packages

• @vue/language-core - Core module
• @vue/language-server - Language server
• vue-component-meta - Component metadata

License

MIT License