@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
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. 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.
Extract type
const const hi: "Hello"
hi = 'Hello';
const const msg: "Hello, world"
msg = `${const hi: "Hello"
hi }, world`;
Completions
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
console .e- error
;
Highlighting
function function add(a: number, b: number): number
add (a: number
a : number, b: number
b : number) {
return a: number
a + b: number
b ;
}
Error
const str: string = 1;
Config
The plugin accepts an object with the following type:
export interface PluginTwoslashOptions {
PluginTwoslashOptions.explicitTrigger?: boolean | undefined
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 thetwoslash
tag will be processed.