@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