close
Rspress
  • 中文

      • @rspress/plugin-twoslash
      源码
      new

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

      安装

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

      使用

      1. 注册插件

      rspress.config.ts
      import { 
      function defineConfig(config: UserConfig): UserConfig (+1 overload)
      Define a static Rspress configuration object.
      @paramconfig  - The Rspress configuration object.@returnsThe  same configuration object (enables type checking and IDE autocompletion).@example
      import { defineConfig } from '@rspress/core';

export default defineConfig({
  title: 'My Site',
});
      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 (+1 overload)
      Define a static Rspress configuration object.
      @paramconfig  - The Rspress configuration object.@returnsThe  same configuration object (enables type checking and IDE autocompletion).@example
      import { defineConfig } from '@rspress/core';

export default defineConfig({
  title: 'My Site',
});
      defineConfig      ({      
  
      UserConfig.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
      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;      
  
      PluginTwoslashOptions.cache?: boolean | undefined
      cache      ?: boolean;      
  
      PluginTwoslashOptions.twoslashOptions?: TwoslashOptions | undefined
      twoslashOptions      ?: TwoslashOptions;      
}

      explicitTrigger

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

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

      cache

      cache 用于在 createTwoslasher 时根据编译器选项缓存 TypeScript 语言服务器。默认值为 true。

      twoslashOptions

      twoslashOptions 用于传递选项到 Twoslash。 这允许您自定义 Twoslash 的行为,包括 TypeScript 编译器选项和其他设置。