CODEWITHSUNDEEP
monaco-editor
Rob
Rob

Reputation: 263

Monaco Editor custom formatters

I am trying to use the Monaco Editor by Microsoft in a project I am currently developing. I have looked through the documentation and see that you can setup a custom language with custom code completion and syntax highlighting, but I cannot find any information on how we can add custom formatting to the custom language as well.

Is this a possibility?

Upvotes: 7

Views: 3676

Answers (1)

Rizky Ramadhan
Rizky Ramadhan

Reputation: 7770

Read the docs: registerDocumentFormattingEditProvider

You must create a new DocumentFormattingEditProvider and then pass it to monaco.languages.registerDocumentFormattingEditProvider. For example:

const cssFormatProvider = {
    provideDocumentFormattingEdits(model, options, token) {
        return [{
            text: YourFormatter(model.getValue()) // put formatted text here
            range: model.getFullModelRange()
        }];
    }
};
const languageId = 'css';

monaco.languages.registerDocumentFormattingEditProvider(languageId, cssFormatProvider);

Upvotes: 7

Related Questions