@rspress/plugin-twoslash
集成 Twoslash 的 Rspress 插件,用于自动生成带有类型信息的丰富代码块。
安装
npm add @rspress/plugin-twoslash -D
使用
1. 注册插件
rspress.config.ts
import { defineConfig } from '@rspress/core';
import { pluginTwoslash } from '@rspress/plugin-twoslash';
export default defineConfig({
plugins: [pluginTwoslash()],
});
2. 使用 Twoslash 编写代码块
在 TypeScript 代码块中使用特殊注释来启用 Twoslash 功能。
更详细的用法,请参考 Twoslash 文档。
提取类型
const hi = 'Hello';
const msg = `${hi}, world`;
// ^?
自动补全
// @noErrors
console.e;
// ^|
高亮显示
function add(a: number, b: number) {
// ^^^
return a + b;
}
错误提示
// @noErrorValidation
const str: string = 1;
配置
该插件接受一个对象,具有以下类型:
export interface PluginTwoslashOptions {
explicitTrigger?: boolean;
}
explicitTrigger
explicitTrigger 用于配置是否显式触发 twoslash 功能。默认值为 true。
- 如果设置为
false,默认情况下所有 TypeScript 代码块都将被处理。
- 如果设置为
true,只有带有 twoslash 标签的代码块才会被处理。