Create models using createModelReference
mainWhile standard monaco.editor.createModel works, it creates standalone models that are invisible to VSCode services.
Instead, use monaco.editor.createModelReference(fileUri). This returns a model reference that:
- Allows VSCode services to follow links (e.g., Ctrl+Click).
- Binds the model to a virtual filesystem.
- Provides lifecycle control (saving, dirty state).
- Automatically disposes the model when all references are disposed.
To use this, the file must exist on the virtual filesystem, which you can set up using registerFileSystemOverlay from the files service override.
import * as monaco from 'monaco-editor'
import {
RegisteredFileSystemProvider,
RegisteredMemoryFile,
registerFileSystemOverlay
} from '@codingame/monaco-vscode-files-service-override'
const fileUri = monaco.Uri.file('file:///path/to/file.ts')
// 1. Setup virtual filesystem overlay
const fileSystemProvider = new RegisteredFileSystemProvider(false)
fileSystemProvider.registerFile(new RegisteredMemoryFile(fileUri, 'const x = 1;'))
const overlayDisposable = registerFileSystemOverlay(1, fileSystemProvider)
// 2. Create the model reference
const modelRef = await monaco.editor.createModelReference(fileUri)
// 3. Use the model in an editor
const editor = monaco.editor.create({
model: modelRef.object.textEditorModel
})
// 4. Cleanup
await modelRef.object.save()
modelRef.dispose()
editor.dispose()
overlayDisposable.dispose()