@volar/language-core

What is @volar/language-core?

@volar/language-core is a core library for the Volar language server, which provides enhanced language support for Vue.js. It offers features like type checking, code completion, and diagnostics for Vue components.

What are @volar/language-core's main functionalities?

Type Checking

This feature allows you to perform type checking on Vue components. The code sample demonstrates how to create a language service and get semantic diagnostics for a Vue file.

const { createLanguageService } = require('@volar/language-core');
const service = createLanguageService({
  getScriptFileNames: () => ['example.vue'],
  getScriptVersion: () => '1',
  getScriptSnapshot: (fileName) => {
    if (fileName === 'example.vue') {
      return {
        getText: (start, end) => '<template><div>{{ message }}</div></template><script>export default { data() { return { message: 123 }; } };</script>',
        getLength: () => 100,
        getChangeRange: () => undefined
      };
    }
  },
  getCurrentDirectory: () => '/',
  getCompilationSettings: () => ({}),
  getDefaultLibFileName: () => 'lib.d.ts'
});
const diagnostics = service.getSemanticDiagnostics('example.vue');
console.log(diagnostics);

Code Completion

This feature provides code completion suggestions for Vue components. The code sample shows how to create a language service and get code completions at a specific position in a Vue file.

const { createLanguageService } = require('@volar/language-core');
const service = createLanguageService({
  getScriptFileNames: () => ['example.vue'],
  getScriptVersion: () => '1',
  getScriptSnapshot: (fileName) => {
    if (fileName === 'example.vue') {
      return {
        getText: (start, end) => '<template><div>{{ message }}</div></template><script>export default { data() { return { message: 123 }; } };</script>',
        getLength: () => 100,
        getChangeRange: () => undefined
      };
    }
  },
  getCurrentDirectory: () => '/',
  getCompilationSettings: () => ({}),
  getDefaultLibFileName: () => 'lib.d.ts'
});
const completions = service.getCompletionsAtPosition('example.vue', 10, {});
console.log(completions);

Diagnostics

This feature provides diagnostics for Vue components, helping to identify syntax errors. The code sample demonstrates how to create a language service and get syntactic diagnostics for a Vue file.

const { createLanguageService } = require('@volar/language-core');
const service = createLanguageService({
  getScriptFileNames: () => ['example.vue'],
  getScriptVersion: () => '1',
  getScriptSnapshot: (fileName) => {
    if (fileName === 'example.vue') {
      return {
        getText: (start, end) => '<template><div>{{ message }}</div></template><script>export default { data() { return { message: 123 }; } };</script>',
        getLength: () => 100,
        getChangeRange: () => undefined
      };
    }
  },
  getCurrentDirectory: () => '/',
  getCompilationSettings: () => ({}),
  getDefaultLibFileName: () => 'lib.d.ts'
});
const diagnostics = service.getSyntacticDiagnostics('example.vue');
console.log(diagnostics);

Other packages similar to @volar/language-core

typescript-vue-plugin

typescript-vue-plugin is a TypeScript plugin that adds Vue support to the TypeScript language service. It provides features like type checking, code completion, and diagnostics for Vue components. Compared to @volar/language-core, it is more tightly integrated with TypeScript and may be easier to set up for projects already using TypeScript.

vetur

Vetur is a Visual Studio Code extension that provides Vue tooling support, including syntax highlighting, type checking, code completion, and diagnostics. While Vetur offers a comprehensive set of features for Vue development, @volar/language-core is designed to be more modular and can be used in different environments beyond just VS Code.

vue-language-server

vue-language-server is a language server implementation for Vue.js, providing features like type checking, code completion, and diagnostics. It is similar to @volar/language-core in terms of functionality but may have different performance characteristics and configuration options.

README

The README file is missing

Changelog

2.4.10 (2024-11-08)

Bug Fixes

• typescript: fix interactive refactors (#244) - Thanks to @andrewbranch!