@vue/language-service

@vue/language-service

A collection of Vue language service plugins, providing the core implementation for IDE features. This package integrates various language services such as TypeScript, CSS, HTML, Pug, and Emmet, and adds Vue-specific feature plugins.

Installation

npm install @vue/language-service

Usage

import { createVueLanguageServicePlugins } from '@vue/language-service';
import * as ts from 'typescript';

// Create Vue language service plugins
// The optional second argument `client` is used for communication with @vue/typescript-plugin
const plugins = createVueLanguageServicePlugins(ts);

Built-in Plugins

General Language Services

Plugin	Source	Description
JSON	volar-service-json	JSON language service
Pug Format	volar-service-pug-beautify	Pug formatting
Emmet	volar-service-emmet	Emmet abbreviation expansion
TypeScript Syntactic	volar-service-typescript	TypeScript syntactic features
TypeScript Doc Comment	volar-service-typescript	JSDoc comment templates

Vue-specific Plugins

Plugin	Description
vue-sfc	SFC structure support, including folding, symbols, document links
vue-template	Template language service, supporting HTML and Pug
vue-format-per-block	Formatting per block
vue-compiler-dom-errors	Vue compiler error diagnostics
vue-directive-comments	Directive comment support (<!-- @vue-skip -->, etc.)
vue-component-semantic-tokens	Component semantic tokens
vue-inlayhints	Inlay hints (destructured props, inline handlers, etc.)
vue-missing-props-hints	Hints for missing required props
vue-autoinsert-dotvalue	Auto-insertion of .value for ref variables
vue-autoinsert-space	Auto-insertion of spaces in template interpolations
vue-scoped-class-links	Scoped CSS class name links
vue-template-ref-links	Template ref links
vue-extract-file	Extract component refactoring
vue-document-drop	Auto-generation of import on file drop
vue-document-highlights	Document highlights
vue-suggest-define-assignment	Assignment suggestions for defineProps, etc.
vue-twoslash-queries	Twoslash query support (// ^?)
css	CSS language service, supporting v-bind and CSS Modules
typescript-semantic-tokens	TypeScript semantic tokens

Usage with @volar/kit

To use the language service in a Node.js environment (e.g., for linting or testing):

import { createLanguage, createVueLanguagePlugin } from '@vue/language-core';
import { createLanguageService, createVueLanguageServicePlugins } from '@vue/language-service';
import ts from 'typescript';

const language = createLanguage([
  createVueLanguagePlugin(ts, compilerOptions, vueCompilerOptions, asFileName),
]);

const service = createLanguageService(
  language,
  createVueLanguageServicePlugins(ts),
  env,
);

Related Packages

• @vue/language-core - Core module
• @vue/language-server - Language server
• @volar/language-service - Volar.js base framework

License

MIT License