Monaco Editor custom formatters

5
votes

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?

1
monaco-editor

1 Answers

6
votes

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);