javascriptprettiermonaco-editorbabel-parser

Not working in prettier formatting using monaco editor

I'm trying to make an IDE that works in the browser using the Monaco editor. I wanted to use Prettier for a nice formatting. It only works for Javascript files or only html files. However, it does not work on files of the types I have specified below. How can I fix.

Expected : enter image description here

Result : enter image description here

Also i am getting this error : enter image description here 

    monaco.languages.registerDocumentFormattingEditProvider("javascript", {
            async provideDocumentFormattingEdits(model) {
                alert(1);
                var text1 = prettier.format(model.getValue(), {
                    wrapAttributes: "force",
                    parser: "babel",
                    // plugins: [babel],
                    htmlWhitespaceSensitivity: "ignore",
                    arrowParens: "always",
                    bracketSpacing: true,
                    endOfLine: "lf",
                    insertPragma: false,
                    singleAttributePerLine: false,
                    bracketSameLine: false,
                    printWidth: 400,
                    proseWrap: "preserve",
                    quoteProps: "as-needed",
                    requirePragma: false,
                    semi: true,
                    singleQuote: true,
                    tabWidth: 4,
                    //trailingComma: 'es5',
                    useTabs: false,
                    vueIndentScriptAndStyle: false,
                });

               

                return [
                    {
                        range: model.getFullModelRange(),
                        text: text1,
                    },
                ];
            },
        });
 monaco_scr_editor = monaco.editor.create(document.getElementById("browserIDE"), {
            value: ["<html>Please Wait Loading</html>"].join("\n"),
            language: "javascript",
            theme: "vs-dark",
            wrappingColumn: 0,
            autoIndent: true,
            formatOnPaste: true,
            formatOnType: true,
            wrappingIndent: "indent",
            wordWrap: "off",
            automaticLayout: true,
            overviewRulerLanes: 1,
            overviewRulerBorder: true,
            minimap: { enabled: false },
        });
Solution

  • It seems like designed to use pre-defined formatter.
    Please refer this issue : Disable default formatters. I tested code as below(from a thread),

    monaco.languages.html.htmlDefaults.setModeConfiguration({
   ...monaco.languages.html.htmlDefaults.modeConfiguration,
   documentFormattingEdits: false,
   documentRangeFormattingEdits: false,
});

    This will work for you.
    But you still get error relate with prettier.
    Refer this issue : https://github.com/prettier/prettier/issues/6264

    Before doing this, install this to make easy import parser list from node_module.

    npm install @types/prettier

    and then import it.

    import * as prettier from  'prettier/standalone'
import * as parserHtml from 'prettier/parser-html'
...
prettier.format(model.getValue(), {
                ...
                parser: "html",
                plugins: [parserHtml],
                ...