Set up TypeScript and the Editor

Lapikit uses a custom <kit:*> syntax that is transformed into standard Svelte components at build time via its preprocessor. This page explains how to configure your editor and linting tools to work properly with lapikit.

Configure ESLint with Lapikit

Lapikit provides an official ESLint config package to avoid false positives caused by its preprocessor.

Install it:

Then add it to your eslint.config.js:

This config handles the @typescript-eslint/no-unused-vars rule for lapikit-specific snippets such as activator, indicator, append, prepend, close, load, and tooltip.

Note: eslint-config-lapikit configures the @typescript-eslint/no-unused-vars rule. If you already have a custom configuration for this rule, place the lapikit config first so your own rules take precedence:

Known TypeScript and editor limitations

Snippet warnings in TypeScript

When using lapikit snippets like activator, your IDE may display the following warning ts(6133):

This is a known false positive. Lapikit’s <kit:*> syntax is transformed into standard Svelte components by its preprocessor at build time, but IDE language servers analyze your source files directly without running the preprocessor. As a result, they cannot determine that snippets like activator are consumed by the transformed component.

Your code is correct and will work as expected - this warning can be safely ignored.

To suppress it, set noUnusedLocals to false in your tsconfig.json:

Note: This is a limitation of the current Svelte language server. A fix would require native support for custom preprocessors in IDE language servers. This issue has been reported upstream.

Missing component autocompletion

For the same reason, IDE autocompletion is not available for <kit:*> tags. Full IDE support would require a dedicated editor extension, which is on the lapikit roadmap.

Using Lapikit Without the Preprocessor

If the false positives are a blocker for your workflow, you can use lapikit components directly without the preprocessor. Import them manually from lapikit/labs/components and use them like any standard Svelte component:

Your IDE will fully understand this syntax and the ts(6133) warning will no longer appear.

Keep in mind: By skipping the preprocessor, you lose the main benefits of the <kit:*> syntax - automatic imports, shorter and more readable markup, and the full integration optimizations that lapikit is designed around. We recommend sticking with the preprocessor and suppressing the warning via noUnusedLocals: false.

Continue working with Lapikit and TypeScript

Lapikit is designed to integrate with your Svelte or SvelteKit workflows, including TypeScript, ESLint, and code editors.

Since some features rely on the Lapikit preprocessor and a custom template syntax, certain editors or static analysis tools may report incomplete autocompletion or generate false warnings. These limitations stem from these tools’ current support for custom Svelte syntax.

The purpose of this page is to help you properly configure your environment, understand your editor’s expected behavior, and maintain a manageable workflow while using Lapikit components, stores, hooks, and template helpers.

For the best experience, check out the pages on installation, template syntax, and component documentation.