tessl/npm-monaco-editor

A browser based code editor that powers Visual Studio Code

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Languages and Providers

Name: tessl/npm-monaco-editor
Author: tessl

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

Language Registration

Basic Language Registration

monaco.languages.register(language: ILanguageExtensionPoint): void

Registers a new language.

interface ILanguageExtensionPoint {
    id: string;
    extensions?: string[];
    filenames?: string[];
    filenamePatterns?: string[];
    firstLine?: string;
    aliases?: string[];
    mimetypes?: string[];
    configuration?: Uri;
}

// Register a custom language
monaco.languages.register({
    id: 'myCustomLanguage',
    extensions: ['.mcl'],
    aliases: ['My Custom Language', 'mcl'],
    mimetypes: ['text/mcl']
});

Getting Registered Languages

monaco.languages.getLanguages(): ILanguageExtensionPoint[]

Gets all registered languages.

const languages = monaco.languages.getLanguages();
console.log('Available languages:', languages.map(l => l.id));

Language Loading

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

monaco.languages.onLanguageEncountered(languageId: string, callback: () => void): IDisposable

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

monaco.languages.registerTokensProviderFactory(languageId: string, factory: ITokensProviderFactory): IDisposable

Registers a factory for creating tokenization providers on demand.

interface ITokensProviderFactory {
    create(): Promise<IMonarchLanguage | languages.ITokensProvider>;
}

// Lazy load language tokenization
monaco.languages.onLanguageEncountered('myLanguage', () => {
    // Load language configuration when first used
    import('./myLanguageConfig').then(config => {
        monaco.languages.setLanguageConfiguration('myLanguage', config.languageConfig);
    });
});

// Register a tokens provider factory for lazy loading
monaco.languages.registerTokensProviderFactory('myLanguage', {
    create: async () => {
        const { tokenProvider } = await import('./myLanguageTokens');
        return tokenProvider;
    }
});

Monarch Tokenizer

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

Setting Monarch Tokens Provider

monaco.languages.setMonarchTokensProvider(languageId: string, languageDef: IMonarchLanguage): IDisposable

Sets a Monarch tokenizer for a language.

interface IMonarchLanguage {
    tokenizer: { [name: string]: IMonarchLanguageRule[] };
    ignoreCase?: boolean;
    defaultToken?: string;
    brackets?: IMonarchLanguageBracket[];
    start?: string;
    tokenPostfix?: string;
    // ... many more options
}

// Simple tokenizer example
monaco.languages.setMonarchTokensProvider('myLanguage', {
    tokenizer: {
        root: [
            [/\[error.*/, "custom-error"],
            [/\[notice.*/, "custom-notice"],
            [/\[info.*/, "custom-info"],
            [/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
        ]
    }
});

Built-in Language Support

Monaco includes Monarch tokenizers for many languages:

JavaScript, TypeScript
Python, Java, C#, C++
HTML, CSS, SCSS, Less
JSON, XML, YAML
SQL, Shell scripts
Go, Rust, Swift
And 60+ more languages

Language Configuration

Setting Language Configuration

monaco.languages.setLanguageConfiguration(languageId: string, configuration: LanguageConfiguration): IDisposable

Sets language-specific configuration.

interface LanguageConfiguration {
    comments?: CommentRule;
    brackets?: CharacterPair[];
    wordPattern?: RegExp;
    indentationRules?: IndentationRule;
    onEnterRules?: OnEnterRule[];
    autoClosingPairs?: IAutoClosingPairConditional[];
    surroundingPairs?: IAutoClosingPair[];
    folding?: FoldingRules;
    __electricCharacterSupport?: IBracketElectricCharacterContribution;
}

monaco.languages.setLanguageConfiguration('myLanguage', {
    comments: {
        lineComment: '//',
        blockComment: ['/*', '*/']
    },
    brackets: [
        ['{', '}'],
        ['[', ']'],
        ['(', ')']
    ],
    autoClosingPairs: [
        { open: '{', close: '}' },
        { open: '[', close: ']' },
        { open: '(', close: ')' },
        { open: '"', close: '"' },
        { open: "'", close: "'" }
    ],
    surroundingPairs: [
        { open: '{', close: '}' },
        { open: '[', close: ']' },
        { open: '(', close: ')' },
        { open: '"', close: '"' },
        { open: "'", close: "'" }
    ]
});

Language Providers

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

Completion Provider

monaco.languages.registerCompletionItemProvider(
    languageId: string,
    provider: CompletionItemProvider
): IDisposable

Registers a completion item provider.

interface CompletionItemProvider {
    triggerCharacters?: string[];
    provideCompletionItems(
        model: ITextModel,
        position: Position,
        context: CompletionContext,
        token: CancellationToken
    ): ProviderResult<CompletionList>;
    resolveCompletionItem?(
        item: CompletionItem,
        token: CancellationToken
    ): ProviderResult<CompletionItem>;
}

monaco.languages.registerCompletionItemProvider('myLanguage', {
    provideCompletionItems: function(model, position) {
        const suggestions = [
            {
                label: 'simpleText',
                kind: monaco.languages.CompletionItemKind.Text,
                insertText: 'simpleText'
            },
            {
                label: 'testing',
                kind: monaco.languages.CompletionItemKind.Keyword,
                insertText: 'testing(${1:condition})',
                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
            }
        ];
        return { suggestions: suggestions };
    }
});

Hover Provider

monaco.languages.registerHoverProvider(
    languageId: string,
    provider: HoverProvider
): IDisposable

Registers a hover information provider.

interface HoverProvider {
    provideHover(
        model: ITextModel,
        position: Position,
        token: CancellationToken
    ): ProviderResult<Hover>;
}

monaco.languages.registerHoverProvider('myLanguage', {
    provideHover: function(model, position) {
        const word = model.getWordAtPosition(position);
        if (word) {
            return {
                range: new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn),
                contents: [
                    { value: '**' + word.word + '**' },
                    { value: 'This is hover information for: ' + word.word }
                ]
            };
        }
    }
});

Document Symbol Provider

monaco.languages.registerDocumentSymbolProvider(
    languageId: string,
    provider: DocumentSymbolProvider
): IDisposable

Registers a document symbol provider for outline view.

interface DocumentSymbolProvider {
    provideDocumentSymbols(
        model: ITextModel,
        token: CancellationToken
    ): ProviderResult<DocumentSymbol[]>;
}

Definition Provider

monaco.languages.registerDefinitionProvider(
    languageId: string,
    provider: DefinitionProvider
): IDisposable

Registers a "Go to Definition" provider.

interface DefinitionProvider {
    provideDefinition(
        model: ITextModel,
        position: Position,
        token: CancellationToken
    ): ProviderResult<Definition>;
}

Reference Provider

monaco.languages.registerReferenceProvider(
    languageId: string,
    provider: ReferenceProvider
): IDisposable

Registers a "Find All References" provider.

Rename Provider

monaco.languages.registerRenameProvider(
    languageId: string,
    provider: RenameProvider
): IDisposable

Registers a symbol rename provider.

Diagnostic Provider

monaco.languages.onLanguage(languageId: string, callback: () => void): IDisposable

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

Use this to lazily register providers:

monaco.languages.onLanguage('myLanguage', () => {
    // Register providers for myLanguage
    monaco.languages.registerCompletionItemProvider('myLanguage', completionProvider);
    monaco.languages.registerHoverProvider('myLanguage', hoverProvider);
});

Code Actions

Code Action Provider

monaco.languages.registerCodeActionProvider(
    languageId: string,
    provider: CodeActionProvider
): IDisposable

Registers a code action provider for quick fixes and refactorings.

interface CodeActionProvider {
    provideCodeActions(
        model: ITextModel,
        range: Range,
        context: CodeActionContext,
        token: CancellationToken
    ): ProviderResult<CodeActionList>;
}

monaco.languages.registerCodeActionProvider('myLanguage', {
    provideCodeActions: function(model, range, context) {
        const actions = [];
        
        // Add a quick fix action
        actions.push({
            title: 'Fix this issue',
            kind: 'quickfix',
            edit: {
                edits: [{
                    resource: model.uri,
                    edit: {
                        range: range,
                        text: 'fixed text'
                    }
                }]
            }
        });
        
        return {
            actions: actions,
            dispose: function() {}
        };
    }
});

Formatting

Document Formatting Provider

monaco.languages.registerDocumentFormattingEditProvider(
    languageId: string,
    provider: DocumentFormattingEditProvider
): IDisposable

Registers a document formatting provider.

interface DocumentFormattingEditProvider {
    displayName?: string;
    provideDocumentFormattingEdits(
        model: ITextModel,
        options: FormattingOptions,
        token: CancellationToken
    ): ProviderResult<TextEdit[]>;
}

Range Formatting Provider

monaco.languages.registerDocumentRangeFormattingEditProvider(
    languageId: string,
    provider: DocumentRangeFormattingEditProvider
): IDisposable

Registers a range formatting provider.

On Type Formatting Provider

monaco.languages.registerOnTypeFormattingEditProvider(
    languageId: string,
    provider: OnTypeFormattingEditProvider
): IDisposable

Registers an on-type formatting provider.

Language Features

Signature Help Provider

monaco.languages.registerSignatureHelpProvider(
    languageId: string,
    provider: SignatureHelpProvider
): IDisposable

Registers a signature help provider for parameter hints.

Document Highlight Provider

monaco.languages.registerDocumentHighlightProvider(
    languageId: string,  
    provider: DocumentHighlightProvider
): IDisposable

Registers a document highlight provider for highlighting occurrences.

Implementation Provider

monaco.languages.registerImplementationProvider(
    languageId: string,
    provider: ImplementationProvider
): IDisposable

Registers a "Go to Implementation" provider.

Type Definition Provider

monaco.languages.registerTypeDefinitionProvider(
    languageId: string,
    provider: TypeDefinitionProvider
): IDisposable

Registers a "Go to Type Definition" provider.

Declaration Provider

monaco.languages.registerDeclarationProvider(
    languageId: string,
    provider: DeclarationProvider
): IDisposable

Registers a "Go to Declaration" provider.

Color Support

Color Provider

monaco.languages.registerColorProvider(
    languageId: string,
    provider: DocumentColorProvider
): IDisposable

Registers a color provider for color decorations and color picker.

interface DocumentColorProvider {
    provideDocumentColors(
        model: ITextModel,
        token: CancellationToken
    ): ProviderResult<IColorInformation[]>;
    provideColorPresentations(
        model: ITextModel,
        colorInfo: IColorInformation,
        token: CancellationToken
    ): ProviderResult<IColorPresentation[]>;
}

Folding

Folding Range Provider

monaco.languages.registerFoldingRangeProvider(
    languageId: string,
    provider: FoldingRangeProvider
): IDisposable

Registers a folding range provider for code folding.

interface FoldingRangeProvider {
    provideFoldingRanges(
        model: ITextModel,
        context: FoldingContext,
        token: CancellationToken
    ): ProviderResult<FoldingRange[]>;
}

Selection Range

Selection Range Provider

monaco.languages.registerSelectionRangeProvider(
    languageId: string,
    provider: SelectionRangeProvider
): IDisposable

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

Linked Editing

Linked Editing Range Provider

monaco.languages.registerLinkedEditingRangeProvider(
    languageId: string,
    provider: LinkedEditingRangeProvider
): IDisposable

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

Usage Example

// Complete language setup example
monaco.languages.register({ id: 'myLanguage' });

monaco.languages.setMonarchTokensProvider('myLanguage', {
    tokenizer: {
        root: [
            [/\bfunction\b/, 'keyword'],
            [/\b\d+\b/, 'number'],
            [/"([^"\\]|\\.)*$/, 'string.invalid'],
            [/"/, 'string', '@string']
        ],
        string: [
            [/[^\\"]+/, 'string'],
            [/"/, 'string', '@pop']
        ]
    }
});

monaco.languages.setLanguageConfiguration('myLanguage', {
    comments: { lineComment: '//' },
    brackets: [['(', ')'], ['{', '}'], ['[', ']']],
    autoClosingPairs: [
        { open: '(', close: ')' },
        { open: '{', close: '}' },
        { open: '[', close: ']' },
        { open: '"', close: '"' }
    ]
});

monaco.languages.registerCompletionItemProvider('myLanguage', {
    provideCompletionItems: () => {
        return {
            suggestions: [
                {
                    label: 'function',
                    kind: monaco.languages.CompletionItemKind.Keyword,
                    insertText: 'function ${1:name}() {\n\t$0\n}'
                }
            ]
        };
    }
});

docs

editor-core.md

index.md

languages-and-providers.md

models-and-uris.md

other-languages.md

typescript-language.md

workers-and-environment.md

tile.json

tessl/npm-monaco-editor