@volar/language-core

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);