typescriptmonaco-editor

How to create multiple TypeScript languages with unique extraLibs in Monaco Editor?


I’m working on a project using Monaco Editor where I need multiple TypeScript editors on the same page. Each editor requires unique extraLibs to define its own type definitions. However, Monaco Editor’s typescriptDefaults is global, which means all TypeScript editors share the same configuration.

To address this, I want to register a new language (e.g., typescriptA, typescriptB) for each editor instance. Each language should:

  1. Clone all existing configurations from the default typescript language (e.g., IntelliSense, diagnostics, etc.).

  2. Allow setting unique extraLibs for isolated behavior.

Question

How can I register a new language in Monaco Editor that:

  1. Fully replicates the behavior of TypeScript (syntax highlighting, IntelliSense, diagnostics).

  2. Supports custom configurations, such as extraLibs, for each editor instance?

If possible, please provide an example of how to register a new language by cloning the configurations of typescript and applying unique extraLibs. Thank you!


Solution

  • No, that's not possible. You better split the editors (for example on a tabview, each editor on its own tab, which gets unmounted, when the tab becomes inactive).