Skip to content

Class: MonacoEnvironment ​

MonacoEnvironment provides a custom implementation of the Monaco Editor Environment interface for web-based editors.

This class is responsible for:

  • Resolving the correct worker URL for different language labels (e.g., 'vue', 'css', 'json', etc.).
  • Creating and managing web workers for Monaco Editor language services.
  • Initializing Monaco Editor with additional integrations (Volar, Onigasm, Emmet, etc.) and registering language features.

The static initialize method sets up the global MonacoEnvironment instance and configures Monaco Editor for use in a browser or SSR-safe environment.

Extends ​

  • Environment

Constructors ​

Constructor ​

ts
new MonacoEnvironment(ctx: typeof globalThis): MonacoEnvironment;

Parameters ​

ParameterType
ctxtypeof globalThis

Returns ​

MonacoEnvironment

Inherited from ​

ts
Environment.constructor;

Properties ​

PropertyTypeDescriptionInherited from
baseUrl?stringThe base url where the editor sources are found (which contains the vs folder)Environment.baseUrl
globalAPI?booleanDefine a global monaco symbol. This is true by default in AMD and false by default in ESM.Environment.globalAPI

Methods ​

createTrustedTypesPolicy()? ​

ts
optional createTrustedTypesPolicy(policyName: string, policyOptions?: ITrustedTypePolicyOptions): ITrustedTypePolicy | undefined;

Create a trusted types policy (same API as window.trustedTypes.createPolicy)

Parameters ​

ParameterType
policyNamestring
policyOptions?ITrustedTypePolicyOptions

Returns ​

ITrustedTypePolicy | undefined

Inherited from ​

ts
Environment.createTrustedTypesPolicy;

getWorker() ​

ts
getWorker(_workerId: string, label: string): Worker;

Parameters ​

ParameterType
_workerIdstring
labelstring

Returns ​

Worker

Inherited from ​

ts
Environment.getWorker;

getWorkerUrl() ​

ts
getWorkerUrl(_workerId: string, label: string): string;

Parameters ​

ParameterType
_workerIdstring
labelstring

Returns ​

string

Inherited from ​

ts
Environment.getWorkerUrl;

initialize() ​

ts
static initialize(skipVue: boolean, onigasmWasm: string | ArrayBuffer): Promise<MonacoEnvironment | undefined>;

Initializes the Monaco Editor environment and Volar language tooling for browser-based editors.

This static method should be called once during application startup or editor initialization. It:

  • Sets up the global MonacoEnvironment instance for worker resolution and language services.
  • Loads and configures Onigasm for syntax highlighting and Emmet for HTML/Vue.
  • Registers the Vue language and its worker in Monaco.
  • Instantiates and manages MonacoVueLanguageTools for robust Volar integration, disposing any previous instance.
  • Registers a custom editor opener for Monaco.

Parameters ​

ParameterTypeDefault value
skipVuebooleanfalse
onigasmWasmstring | ArrayBufferinlineOnigasmWasmUrl

Returns ​

Promise<MonacoEnvironment | undefined>

Remarks ​

This method is idempotent and safe to call multiple times; it will only initialize once per global context.

Example ​

ts
import { MonacoEnvironment } from "./class_monaco_environment";
import { NVEFileSystem } from "./class_monaco_filesystem";

await MonacoEnvironment.initialize(fs);
// Monaco and Volar are now fully configured for browser-based editing.