@rspress/plugin-twoslash

集成 Twoslash 的 Rspress 插件,用于自动生成带有类型信息的丰富代码块。

安装

npm
yarn
pnpm
bun
npm add @rspress/plugin-twoslash -D

使用

1. 注册插件

rspress.config.ts
import { 
function defineConfig(config: UserConfig): UserConfig
defineConfig
} from '@rspress/core';
import {
function pluginTwoslash(options?: PluginTwoslashOptions): RspressPlugin

Plugin to applies Twoslash transformations to code blocks.

pluginTwoslash
} from '@rspress/plugin-twoslash';
export default
function defineConfig(config: UserConfig): UserConfig
defineConfig
({
UserConfig<DefaultThemeConfig>.plugins?: RspressPlugin[] | undefined

Doc plugins

plugins
: [
function pluginTwoslash(options?: PluginTwoslashOptions): RspressPlugin

Plugin to applies Twoslash transformations to code blocks.

pluginTwoslash
()],
});

2. 使用 Twoslash 编写代码块

在 TypeScript 代码块中使用特殊注释来启用 Twoslash 功能。

更详细的用法,请参考 Twoslash 文档

提取类型

结果
语法
const 
const hi: "Hello"
hi
= 'Hello';
const
const msg: "Hello, world"
msg
= `${
const hi: "Hello"
hi
}, world`;

自动补全

结果
语法
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
  • A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:

console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:

const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console
.e
  • error
;

高亮显示

结果
语法
function 
function add(a: number, b: number): number
add
(
a: number
a
: number,
b: number
b
: number) {
return
a: number
a
+
b: number
b
;
}

错误提示

结果
语法
const str: string = 1;
Type 'number' is not assignable to type 'string'.

配置

该插件接受一个对象,具有以下类型:

export interface PluginTwoslashOptions {
  
PluginTwoslashOptions.explicitTrigger?: boolean | undefined
explicitTrigger
?: boolean;
}

explicitTrigger

explicitTrigger 用于配置是否显式触发 twoslash 功能。默认值为 true

  • 如果设置为 false,默认情况下所有 TypeScript 代码块都将被处理。
  • 如果设置为 true,只有带有 twoslash 标签的代码块才会被处理。