@rspress/plugin-twoslash
Integration of Twoslash's Rspress Plugin for automatically generating rich code blocks with type information.
Installation
npm add @rspress/plugin-twoslash -D
Usage
1. Register the plugin
rspress.config.ts
import { defineConfig } from '@rspress/core';
import { pluginTwoslash } from '@rspress/plugin-twoslash';
export default defineConfig({
plugins: [pluginTwoslash()],
});
2. Write code blocks with twoslash
Use special comments within TypeScript code blocks to enable Twoslash features.
For more detailed usage, please refer to the Twoslash documentation.
const hi = 'Hello';
const = `${hi}, world`;
Completions
Highlighting
function add(a: number, b: number) {
return a + b;
}
Error
const str: string = 1;Type 'number' is not assignable to type 'string'.
Config
The plugin accepts an object with the following type:
export interface PluginTwoslashOptions {
explicitTrigger?: boolean;
}
explicitTrigger
explicitTrigger
is used to configure whether to explicitly trigger the Twoslash feature. Default is true
.
- If set to
false
, all TypeScript code blocks will be processed by default.
- If set to
true
, only code blocks with the twoslash
tag will be processed.