Volar TypeScript Language Service

Common errors

• Cannot find module 'volar-service-typescript'

  cause The package `volar-service-typescript` is not installed in your project.
  fix Run `npm install volar-service-typescript` or `yarn add volar-service-typescript` to install the package.

• TypeError: (0 , volar_service_typescript__WEBPACK_IMPORTED_MODULE_0__.create) is not a function

  cause This error typically occurs in bundled environments (like Webpack) when attempting to default import a named CommonJS export, or incorrect destructuring.
  fix Ensure you are using named imports: `import { create } from 'volar-service-typescript';` for ESM, or correct destructuring for CJS: `const { create } = require('volar-service-typescript');`.

• The "@volar/language-service" peer dependency is not installed.

  cause Volar's core language service, a peer dependency, is missing from your project.
  fix Install the peer dependency: `npm install @volar/language-service@~2.4.0` (adjust version to match your Volar installation's requirement).

Warnings

• breaking Major version updates of `@volar/language-service` often introduce breaking changes that require updating `volar-service-typescript` to a compatible version. Always check the Volar release notes.
  Fix: Ensure `volar-service-typescript` is updated to a version compatible with your `@volar/language-service` installation. Refer to the official Volar documentation or GitHub releases for compatibility matrices.
• gotcha TypeScript version mismatches between your project's `typescript` dependency and the version Volar or its services might be using can lead to unexpected type errors or incorrect diagnostics.
  Fix: Try to align your project's `typescript` dependency version with what Volar officially supports or recommends. If issues persist, consider using Volar's 'Use Workspace TypeScript Version' setting if available in your editor.
• gotcha Changes to the `volar.config.js` structure or the `create()` function's options between Volar versions can lead to service not loading or incorrect behavior.
  Fix: Consult the latest Volar documentation for the correct `volar.config.js` syntax and `volar-service-typescript.create()` options for your specific Volar version.

Install

• npm install volar-service-typescript npm
• yarn add volar-service-typescript yarn
• pnpm add volar-service-typescript pnpm

Imports

• create
  wrong:

  import create from 'volar-service-typescript';

  correct:

  import { create } from 'volar-service-typescript';

  The primary export is a named `create` function for configuring the service. Most modern setups will use ESM imports.
• create
  wrong:

  const create = require('volar-service-typescript');

  correct:

  const { create } = require('volar-service-typescript');

  When using CommonJS, particularly in configuration files like `volar.config.js`, the `create` function must be destructured from the module export.

Quickstart

This quickstart demonstrates how to configure `volar-service-typescript` within your `volar.config.js` to enable TypeScript language features in your Volar project, alongside a basic `tsconfig.json`.

/* volar.config.js */
module.exports = {
	// Other Volar configurations...

	services: [
		// Integrate the TypeScript language service
		require('volar-service-typescript').create({
			// Optional: Custom TypeScript plugin options
			// E.g., disable default semantic diagnostics if handled externally
			// diagnosticSemantic: false,
		}),
	],
};

/* Example tsconfig.json (in your project root) */
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    // ... other TS options
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}