Expressive Code Twoslash (EC-Twoslash) is highly configurable, allowing you to tailor its behavior to fit your specific needs. This section provides an overview of the various configuration options available, including how to customize the appearance of code blocks, enable or disable specific features, and integrate with other tools.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
The instanceConfigs option allows for configuring the included twoslasher instances. This is useful for customizing the behavior of specific Twoslash instances based on the trigger and language. For example, you can configure one instance to handle TypeScript code blocks and another instance to handle Vue code blocks, each with its own set of options and transformations.
The explicitTrigger option determines how EC-Twoslash identifies which code blocks should be processed with Twoslash transformations. When set to true, EC-Twoslash will only process code blocks that contain an explicit trigger annotation (e.g., // @twoslash for JavaScript/TypeScript). When set to a regular expression, EC-Twoslash will use the provided regex to match against the content of the code blocks to determine if they should be processed. If set to false, EC-Twoslash will process all code blocks of the specified languages without requiring any trigger annotations.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Starlight project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Starlight project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
For configuring the eslint Twoslasher instance, the options are the same as for the twoslash instance, but they will only apply to code blocks that match the trigger and language specified for the eslint instance. For example, you can configure the eslint instance to only process TypeScript code blocks that contain an eslint trigger annotation.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Starlight project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Starlight project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
@returns ― A plugin object with the specified configuration.
ecTwoSlash({
PluginTwoslashOptions.instanceConfigs?: {
twoslash?: {
explicitTrigger?: boolean | RegExp;
languages?: ReadonlyArray<string>;
};
eslint?: {
explicitTrigger?: boolean | RegExp;
languages?: ReadonlyArray<string>;
};
} |undefined
Allows for configuring the included twoslasher instances and their triggers.
instanceConfigs: {
eslint?: {
explicitTrigger?: boolean | RegExp;
languages?: ReadonlyArray<string>;
} |undefined
ESLint Twoslash instance configuration.
Unlike the standard Twoslash instance, the ESLint Twoslash instance uses eslint as its meta trigger for code blocks, and it is designed to work with JavaScript and TypeScript code blocks that contain ESLint errors. When a code block is annotated with eslint, the ESLint Twoslash instance will parse the code and display any ESLint errors as annotations in the code block.
eslint: {
explicitTrigger?: boolean | RegExp |undefined
If true, requires eslint to be present in the code block meta for
this transformer to be applied.
If a RegExp, requires the RegExp to match a directive in the code
block meta for this transformer to be applied.
If false, this transformer will be applied to all code blocks that match
the specified languages.
It is recommended to keep this as true to avoid unnecessary processing.
Optionally specify the current working directory for the Twoslash instances. This can be useful if you want to change the base directory from which Twoslash resolves modules and files. By default, Twoslash uses the current working directory of the process, but you can set this option to any valid directory path to customize where Twoslash looks for files and modules.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
The tsConfigPath option allows you to specify the path to a custom tsconfig.json file that Twoslash should use when processing TypeScript code blocks. This is useful if you want to provide specific TypeScript compiler options or include/exclude certain files from the Twoslash transformations. By default, Twoslash will look for a tsconfig.json file in the current working directory, but you can set this option to point to any valid tsconfig.json file in your project.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
An optional path to a tsconfig.json file to use as the basis for the compiler options when running Twoslash.
If not provided, Twoslash will look for a tsconfig.json file in the cwd and use it if found. If no tsconfig.json file is found, Twoslash will use a default set of compiler options.
tsConfigPath: "tsconfig-twoslash.json", // Specify a custom tsconfig.json file for Twoslash
The includeJsDoc option determines whether JSDoc comments should be included in the hover information provided by EC-Twoslash. When set to true, EC-Twoslash will include JSDoc comments in the hover popup, providing additional context and documentation for the code being hovered over. If set to false, JSDoc comments will be excluded from the hover information, resulting in a more concise hover popup that only includes type information and other relevant details.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
The allowNonStandardJsDocTags option determines whether non-standard JSDoc tags should be included in the hover information provided by EC-Twoslash. When set to true, EC-Twoslash will include non-standard JSDoc tags in the hover popup, allowing you to see custom documentation that may not be part of the standard JSDoc specification. If set to false, only standard JSDoc tags will be included in the hover information, resulting in a more streamlined hover popup that focuses on commonly used documentation tags.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
The twoslashOptions option allows you to forward additional options directly to the twoslash preprocessor. This is useful for customizing the behavior of Twoslash itself, such as enabling specific features, configuring how code is processed, or adjusting the output of Twoslash transformations. For a full list of available options that can be forwarded to Twoslash, see the Twoslash documentation.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
This option is only used if the vue language is included in the languages option and will be ignored otherwise. It allows you to customize the behavior of the twoslash-vue preprocessor, which is responsible for handling Vue-specific features in EC-Twoslash. For a full list of available options that can be forwarded to twoslash-vue, see the Twoslash Vue documentation.
This option is only used if the eslint instance is configured in the instanceConfigs option and will be ignored otherwise. It allows you to customize the behavior of the twoslash-eslint preprocessor, which is responsible for handling ESLint-specific features in EC-Twoslash. For a full list of available options that can be forwarded to twoslash-eslint, see the Twoslash ESLint documentation.
The VueSpecificTwoslashOptions type represents the options that can be forwarded to twoslash-vue, excluding the standard Twoslash options. This type is derived by omitting the keys of TwoslashOptions from CreateTwoslashVueOptions, ensuring that only Vue-specific options are included.
The CreateTwoslashESLintOptions type represents the options that can be forwarded to twoslash-eslint, excluding the standard Twoslash options. This type is derived by omitting the keys of TwoslashOptions from CreateTwoslashESLintOptions, ensuring that only ESLint-specific options are included.
type CreateTwoslashESLintOptions = {
/**
* Flat configs for ESLint
*/
eslintConfig: Linter.FlatConfig[];
/**
* Custom code transform before sending to ESLint for verification
