@preact-labs/sfc-ts-plugin

TypeScript Language Service Plugin for Preact SFC single-file components.

This plugin enables IDE features for .sfc files, including:

• TypeScript type checking in your editor
• IntelliSense/autocomplete
• Go-to-definition
• Find references
• Refactoring support

[!NOTE] When you use sfc-vscode you have this installed automatically.

Installation

pnpm add -D @preact-labs/sfc-ts-plugin

Configuration

Add the plugin to your tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@preact-labs/sfc-ts-plugin"
      }
    ]
  }
}

Important: TypeScript language service plugins only work in editors (VSCode, WebStorm, etc.), not with the tsc command line. For CLI type checking, use @preact-labs/sfc-check instead.

How It Works

The plugin hooks into TypeScript's Language Service to:

1. Recognize .sfc imports - Resolves import Foo from './Foo.htm' to a virtual declaration file (Foo.d.htm.ts)
2. Generate declarations on-the-fly - Lowers each .sfc source to a TypeScript declaration via @preact-labs/sfc-typecheck-core when TypeScript reads files
3. Keep declarations fresh - File watchers invalidate the cached declaration when the .sfc source changes on disk
4. Map definitions back - Go-to-definition results pointing into a virtual declaration are remapped to the real .sfc source

Troubleshooting

Plugin not working?

1. Check that your editor is using the workspace TypeScript version
2. Restart the TypeScript server
3. Look for plugin initialization messages in the TypeScript server logs
4. Verify @preact-labs/sfc-ts-plugin is installed as a dependency

CLI type checking not working?

Language Service Plugins don't affect tsc. Use @preact-labs/sfc-check for command-line type checking.

Related Packages

• @preact-labs/sfc-check - CLI type checker for tsc integration
• @preact-labs/sfc-language-server - LSP server for advanced IDE features
• @preact-labs/sfc-vscode - VSCode extension with full SFC support

How It Differs from Other Packages

| Package | Purpose | When to Use | |---------|---------|-------------| | typescript-plugin | Basic TS support in any editor | Standard TypeScript IDE features | | sfc-language-server | Advanced LSP features | Specialized SFC tooling (formatting, linting, etc.) | | sfc-vscode | VSCode-specific integration | Best experience in VSCode | | sfc-check | CLI type checking | CI/CD, pre-commit hooks, tsc wrapper |

For most users, this plugin + sfc-check is sufficient:

• Plugin provides IDE support
• sfc-check handles CLI/CI type checking