0
# Languages and Providers
1

2
Language registration, tokenization, and provider registration for IntelliSense features across Monaco Editor's 80+ supported languages.
3

4
## Language Registration
5

6
### Basic Language Registration
7

8
```typescript { .api }
9
monaco.languages.register(language: ILanguageExtensionPoint): void
10
```
11

12
Registers a new language.
13

14
```typescript { .api }
15
interface ILanguageExtensionPoint {
16
    id: string;
17
    extensions?: string[];
18
    filenames?: string[];
19
    filenamePatterns?: string[];
20
    firstLine?: string;
21
    aliases?: string[];
22
    mimetypes?: string[];
23
    configuration?: Uri;
24
}
25
```
26

27
```typescript
28
// Register a custom language
29
monaco.languages.register({
30
    id: 'myCustomLanguage',
31
    extensions: ['.mcl'],
32
    aliases: ['My Custom Language', 'mcl'],
33
    mimetypes: ['text/mcl']
34
});
35
```
36

37
### Getting Registered Languages
38

39
```typescript { .api }
40
monaco.languages.getLanguages(): ILanguageExtensionPoint[]
41
```
42

43
Gets all registered languages.
44

45
```typescript
46
const languages = monaco.languages.getLanguages();
47
console.log('Available languages:', languages.map(l => l.id));
48
```
49

50
### Language Loading
51

52
Monaco Editor includes support for lazy-loading languages to improve initial bundle size.
53

54
```typescript { .api }
55
monaco.languages.onLanguageEncountered(languageId: string, callback: () => void): IDisposable
56
```
57

58
Fired when a language is first encountered, useful for lazy loading language features.
59

60
```typescript { .api }
61
monaco.languages.registerTokensProviderFactory(languageId: string, factory: ITokensProviderFactory): IDisposable
62
```
63

64
Registers a factory for creating tokenization providers on demand.
65

66
```typescript { .api }
67
interface ITokensProviderFactory {
68
    create(): Promise<IMonarchLanguage | languages.ITokensProvider>;
69
}
70
```
71

72
```typescript
73
// Lazy load language tokenization
74
monaco.languages.onLanguageEncountered('myLanguage', () => {
75
    // Load language configuration when first used
76
    import('./myLanguageConfig').then(config => {
77
        monaco.languages.setLanguageConfiguration('myLanguage', config.languageConfig);
78
    });
79
});
80

81
// Register a tokens provider factory for lazy loading
82
monaco.languages.registerTokensProviderFactory('myLanguage', {
83
    create: async () => {
84
        const { tokenProvider } = await import('./myLanguageTokens');
85
        return tokenProvider;
86
    }
87
});
88
```
89

90
## Monarch Tokenizer
91

92
Monaco Editor uses the Monarch tokenizer for syntax highlighting of 80+ programming languages.
93

94
### Setting Monarch Tokens Provider
95

96
```typescript { .api }
97
monaco.languages.setMonarchTokensProvider(languageId: string, languageDef: IMonarchLanguage): IDisposable
98
```
99

100
Sets a Monarch tokenizer for a language.
101

102
```typescript { .api }
103
interface IMonarchLanguage {
104
    tokenizer: { [name: string]: IMonarchLanguageRule[] };
105
    ignoreCase?: boolean;
106
    defaultToken?: string;
107
    brackets?: IMonarchLanguageBracket[];
108
    start?: string;
109
    tokenPostfix?: string;
110
    // ... many more options
111
}
112
```
113

114
```typescript
115
// Simple tokenizer example
116
monaco.languages.setMonarchTokensProvider('myLanguage', {
117
    tokenizer: {
118
        root: [
119
            [/\[error.*/, "custom-error"],
120
            [/\[notice.*/, "custom-notice"],
121
            [/\[info.*/, "custom-info"],
122
            [/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
123
        ]
124
    }
125
});
126
```
127

128
### Built-in Language Support
129

130
Monaco includes Monarch tokenizers for many languages:
131
- JavaScript, TypeScript
132
- Python, Java, C#, C++
133
- HTML, CSS, SCSS, Less
134
- JSON, XML, YAML
135
- SQL, Shell scripts
136
- Go, Rust, Swift
137
- And 60+ more languages
138

139
## Language Configuration
140

141
### Setting Language Configuration
142

143
```typescript { .api }
144
monaco.languages.setLanguageConfiguration(languageId: string, configuration: LanguageConfiguration): IDisposable
145
```
146

147
Sets language-specific configuration.
148

149
```typescript { .api }
150
interface LanguageConfiguration {
151
    comments?: CommentRule;
152
    brackets?: CharacterPair[];
153
    wordPattern?: RegExp;
154
    indentationRules?: IndentationRule;
155
    onEnterRules?: OnEnterRule[];
156
    autoClosingPairs?: IAutoClosingPairConditional[];
157
    surroundingPairs?: IAutoClosingPair[];
158
    folding?: FoldingRules;
159
    __electricCharacterSupport?: IBracketElectricCharacterContribution;
160
}
161
```
162

163
```typescript
164
monaco.languages.setLanguageConfiguration('myLanguage', {
165
    comments: {
166
        lineComment: '//',
167
        blockComment: ['/*', '*/']
168
    },
169
    brackets: [
170
        ['{', '}'],
171
        ['[', ']'],
172
        ['(', ')']
173
    ],
174
    autoClosingPairs: [
175
        { open: '{', close: '}' },
176
        { open: '[', close: ']' },
177
        { open: '(', close: ')' },
178
        { open: '"', close: '"' },
179
        { open: "'", close: "'" }
180
    ],
181
    surroundingPairs: [
182
        { open: '{', close: '}' },
183
        { open: '[', close: ']' },
184
        { open: '(', close: ')' },
185
        { open: '"', close: '"' },
186
        { open: "'", close: "'" }
187
    ]
188
});
189
```
190

191
## Language Providers
192

193
Providers supply IntelliSense features like completion, hover information, and diagnostics.
194

195
### Completion Provider
196

197
```typescript { .api }
198
monaco.languages.registerCompletionItemProvider(
199
    languageId: string,
200
    provider: CompletionItemProvider
201
): IDisposable
202
```
203

204
Registers a completion item provider.
205

206
```typescript { .api }
207
interface CompletionItemProvider {
208
    triggerCharacters?: string[];
209
    provideCompletionItems(
210
        model: ITextModel,
211
        position: Position,
212
        context: CompletionContext,
213
        token: CancellationToken
214
    ): ProviderResult<CompletionList>;
215
    resolveCompletionItem?(
216
        item: CompletionItem,
217
        token: CancellationToken
218
    ): ProviderResult<CompletionItem>;
219
}
220
```
221

222
```typescript
223
monaco.languages.registerCompletionItemProvider('myLanguage', {
224
    provideCompletionItems: function(model, position) {
225
        const suggestions = [
226
            {
227
                label: 'simpleText',
228
                kind: monaco.languages.CompletionItemKind.Text,
229
                insertText: 'simpleText'
230
            },
231
            {
232
                label: 'testing',
233
                kind: monaco.languages.CompletionItemKind.Keyword,
234
                insertText: 'testing(${1:condition})',
235
                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
236
            }
237
        ];
238
        return { suggestions: suggestions };
239
    }
240
});
241
```
242

243
### Hover Provider
244

245
```typescript { .api }
246
monaco.languages.registerHoverProvider(
247
    languageId: string,
248
    provider: HoverProvider
249
): IDisposable
250
```
251

252
Registers a hover information provider.
253

254
```typescript { .api }
255
interface HoverProvider {
256
    provideHover(
257
        model: ITextModel,
258
        position: Position,
259
        token: CancellationToken
260
    ): ProviderResult<Hover>;
261
}
262
```
263

264
```typescript
265
monaco.languages.registerHoverProvider('myLanguage', {
266
    provideHover: function(model, position) {
267
        const word = model.getWordAtPosition(position);
268
        if (word) {
269
            return {
270
                range: new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn),
271
                contents: [
272
                    { value: '**' + word.word + '**' },
273
                    { value: 'This is hover information for: ' + word.word }
274
                ]
275
            };
276
        }
277
    }
278
});
279
```
280

281
### Document Symbol Provider
282

283
```typescript { .api }
284
monaco.languages.registerDocumentSymbolProvider(
285
    languageId: string,
286
    provider: DocumentSymbolProvider
287
): IDisposable
288
```
289

290
Registers a document symbol provider for outline view.
291

292
```typescript { .api }
293
interface DocumentSymbolProvider {
294
    provideDocumentSymbols(
295
        model: ITextModel,
296
        token: CancellationToken
297
    ): ProviderResult<DocumentSymbol[]>;
298
}
299
```
300

301
### Definition Provider
302

303
```typescript { .api }
304
monaco.languages.registerDefinitionProvider(
305
    languageId: string,
306
    provider: DefinitionProvider
307
): IDisposable
308
```
309

310
Registers a "Go to Definition" provider.
311

312
```typescript { .api }
313
interface DefinitionProvider {
314
    provideDefinition(
315
        model: ITextModel,
316
        position: Position,
317
        token: CancellationToken
318
    ): ProviderResult<Definition>;
319
}
320
```
321

322
### Reference Provider
323

324
```typescript { .api }
325
monaco.languages.registerReferenceProvider(
326
    languageId: string,
327
    provider: ReferenceProvider
328
): IDisposable
329
```
330

331
Registers a "Find All References" provider.
332

333
### Rename Provider
334

335
```typescript { .api }
336
monaco.languages.registerRenameProvider(
337
    languageId: string,
338
    provider: RenameProvider
339
): IDisposable
340
```
341

342
Registers a symbol rename provider.
343

344
### Diagnostic Provider
345

346
```typescript { .api }
347
monaco.languages.onLanguage(languageId: string, callback: () => void): IDisposable
348
```
349

350
Fires when a language is first needed (model is opened with that language).
351

352
Use this to lazily register providers:
353

354
```typescript
355
monaco.languages.onLanguage('myLanguage', () => {
356
    // Register providers for myLanguage
357
    monaco.languages.registerCompletionItemProvider('myLanguage', completionProvider);
358
    monaco.languages.registerHoverProvider('myLanguage', hoverProvider);
359
});
360
```
361

362
## Code Actions
363

364
### Code Action Provider
365

366
```typescript { .api }
367
monaco.languages.registerCodeActionProvider(
368
    languageId: string,
369
    provider: CodeActionProvider
370
): IDisposable
371
```
372

373
Registers a code action provider for quick fixes and refactorings.
374

375
```typescript { .api }
376
interface CodeActionProvider {
377
    provideCodeActions(
378
        model: ITextModel,
379
        range: Range,
380
        context: CodeActionContext,
381
        token: CancellationToken
382
    ): ProviderResult<CodeActionList>;
383
}
384
```
385

386
```typescript
387
monaco.languages.registerCodeActionProvider('myLanguage', {
388
    provideCodeActions: function(model, range, context) {
389
        const actions = [];
390
        
391
        // Add a quick fix action
392
        actions.push({
393
            title: 'Fix this issue',
394
            kind: 'quickfix',
395
            edit: {
396
                edits: [{
397
                    resource: model.uri,
398
                    edit: {
399
                        range: range,
400
                        text: 'fixed text'
401
                    }
402
                }]
403
            }
404
        });
405
        
406
        return {
407
            actions: actions,
408
            dispose: function() {}
409
        };
410
    }
411
});
412
```
413

414
## Formatting
415

416
### Document Formatting Provider
417

418
```typescript { .api }
419
monaco.languages.registerDocumentFormattingEditProvider(
420
    languageId: string,
421
    provider: DocumentFormattingEditProvider
422
): IDisposable
423
```
424

425
Registers a document formatting provider.
426

427
```typescript { .api }
428
interface DocumentFormattingEditProvider {
429
    displayName?: string;
430
    provideDocumentFormattingEdits(
431
        model: ITextModel,
432
        options: FormattingOptions,
433
        token: CancellationToken
434
    ): ProviderResult<TextEdit[]>;
435
}
436
```
437

438
### Range Formatting Provider
439

440
```typescript { .api }
441
monaco.languages.registerDocumentRangeFormattingEditProvider(
442
    languageId: string,
443
    provider: DocumentRangeFormattingEditProvider
444
): IDisposable
445
```
446

447
Registers a range formatting provider.
448

449
### On Type Formatting Provider
450

451
```typescript { .api }
452
monaco.languages.registerOnTypeFormattingEditProvider(
453
    languageId: string,
454
    provider: OnTypeFormattingEditProvider
455
): IDisposable
456
```
457

458
Registers an on-type formatting provider.
459

460
## Language Features
461

462
### Signature Help Provider
463

464
```typescript { .api }
465
monaco.languages.registerSignatureHelpProvider(
466
    languageId: string,
467
    provider: SignatureHelpProvider
468
): IDisposable
469
```
470

471
Registers a signature help provider for parameter hints.
472

473
### Document Highlight Provider
474

475
```typescript { .api }
476
monaco.languages.registerDocumentHighlightProvider(
477
    languageId: string,  
478
    provider: DocumentHighlightProvider
479
): IDisposable
480
```
481

482
Registers a document highlight provider for highlighting occurrences.
483

484
### Implementation Provider
485

486
```typescript { .api }
487
monaco.languages.registerImplementationProvider(
488
    languageId: string,
489
    provider: ImplementationProvider
490
): IDisposable
491
```
492

493
Registers a "Go to Implementation" provider.
494

495
### Type Definition Provider
496

497
```typescript { .api }
498
monaco.languages.registerTypeDefinitionProvider(
499
    languageId: string,
500
    provider: TypeDefinitionProvider
501
): IDisposable
502
```
503

504
Registers a "Go to Type Definition" provider.
505

506
### Declaration Provider
507

508
```typescript { .api }
509
monaco.languages.registerDeclarationProvider(
510
    languageId: string,
511
    provider: DeclarationProvider
512
): IDisposable
513
```
514

515
Registers a "Go to Declaration" provider.
516

517
## Color Support
518

519
### Color Provider
520

521
```typescript { .api }
522
monaco.languages.registerColorProvider(
523
    languageId: string,
524
    provider: DocumentColorProvider
525
): IDisposable
526
```
527

528
Registers a color provider for color decorations and color picker.
529

530
```typescript { .api }
531
interface DocumentColorProvider {
532
    provideDocumentColors(
533
        model: ITextModel,
534
        token: CancellationToken
535
    ): ProviderResult<IColorInformation[]>;
536
    provideColorPresentations(
537
        model: ITextModel,
538
        colorInfo: IColorInformation,
539
        token: CancellationToken
540
    ): ProviderResult<IColorPresentation[]>;
541
}
542
```
543

544
## Folding
545

546
### Folding Range Provider
547

548
```typescript { .api }
549
monaco.languages.registerFoldingRangeProvider(
550
    languageId: string,
551
    provider: FoldingRangeProvider
552
): IDisposable
553
```
554

555
Registers a folding range provider for code folding.
556

557
```typescript { .api }
558
interface FoldingRangeProvider {
559
    provideFoldingRanges(
560
        model: ITextModel,
561
        context: FoldingContext,
562
        token: CancellationToken
563
    ): ProviderResult<FoldingRange[]>;
564
}
565
```
566

567
## Selection Range
568

569
### Selection Range Provider
570

571
```typescript { .api }
572
monaco.languages.registerSelectionRangeProvider(
573
    languageId: string,
574
    provider: SelectionRangeProvider
575
): IDisposable
576
```
577

578
Registers a selection range provider for smart select/expand selection.
579

580
## Linked Editing
581

582
### Linked Editing Range Provider
583

584
```typescript { .api }
585
monaco.languages.registerLinkedEditingRangeProvider(
586
    languageId: string,
587
    provider: LinkedEditingRangeProvider
588
): IDisposable
589
```
590

591
Registers a linked editing range provider for simultaneous editing of related symbols.
592

593
## Usage Example
594

595
```typescript
596
// Complete language setup example
597
monaco.languages.register({ id: 'myLanguage' });
598

599
monaco.languages.setMonarchTokensProvider('myLanguage', {
600
    tokenizer: {
601
        root: [
602
            [/\bfunction\b/, 'keyword'],
603
            [/\b\d+\b/, 'number'],
604
            [/"([^"\\]|\\.)*$/, 'string.invalid'],
605
            [/"/, 'string', '@string']
606
        ],
607
        string: [
608
            [/[^\\"]+/, 'string'],
609
            [/"/, 'string', '@pop']
610
        ]
611
    }
612
});
613

614
monaco.languages.setLanguageConfiguration('myLanguage', {
615
    comments: { lineComment: '//' },
616
    brackets: [['(', ')'], ['{', '}'], ['[', ']']],
617
    autoClosingPairs: [
618
        { open: '(', close: ')' },
619
        { open: '{', close: '}' },
620
        { open: '[', close: ']' },
621
        { open: '"', close: '"' }
622
    ]
623
});
624

625
monaco.languages.registerCompletionItemProvider('myLanguage', {
626
    provideCompletionItems: () => {
627
        return {
628
            suggestions: [
629
                {
630
                    label: 'function',
631
                    kind: monaco.languages.CompletionItemKind.Keyword,
632
                    insertText: 'function ${1:name}() {\n\t$0\n}'
633
                }
634
            ]
635
        };
636
    }
637
});
638
```