Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 824
Rob Avatar asked Jul 27 '17 03:07

Rob


People also ask

Is Monaco editor free?

monaco-editor - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers.

What is Monaco editor used for?

The Monaco Editor is the code editor that powers VS Code. A good page describing the code editor's features is here. It is licensed under the MIT License and supports Edge, Chrome, Firefox, Safari and Opera. The Monaco editor is not supported in mobile browsers or mobile web frameworks.


1 Answers

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);
like image 182
Rizky Ramadhan Avatar answered Sep 20 '22 03:09

Rizky Ramadhan