How to indent/prettify code on load of Monaco Editor

Hi,

I am using this code:


monaco.editor.create(document.getElementById("container"), {
	value: "function hello() {alert('Hello world!');}",
	language: "javascript",
    "autoIndent": true,
    "formatOnPaste": true,
    "formatOnType": true
});

I would like it to prettify/indent the JS code in the “value” when it loads, but it never works. I already tried using methods like window.editor.getModel().updateOptions({ "autoIndent": true,tabSize: 2 }) but also never works. Any idea how I can make monaco editor prettify the code as it loads, indenting or adding tabs to make it more readable?

Issue Analytics

State:
Created 2 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

11reactions

rcjsuencommented, Sep 17, 2021

When using css, php, js… your code will do nothing. Any idea?

I tried it in JavaScript in the playground and it seems to work.

const editor = monaco.editor.create(document.getElementById("container"), {
    value: "function hello(){\nalert('Hello world!');}",
    language: "javascript",
    "autoIndent": true,
    "formatOnPaste": true,
    "formatOnType": true
});

setTimeout(() => {
    editor.getAction('editor.action.formatDocument').run();
}, 1000)

1reaction

rcjsuencommented, Sep 17, 2021

Any idea how I can make monaco editor prettify the code as it loads, indenting or adding tabs to make it more readable?

You can use editor.getAction('editor.action.formatDocument').run() to format the document.

I am not aware of any initialization event. See #115.

Top Results From Across the Web

monaco editor - how to format format a piece of codes

import * as monaco from 'monaco-editor'; ... a range formatting provider // select some codes and right click those codes // you contextmenu ......

Building a code editor with Monaco - Expo Blog

On start, create new models for each file: monaco. editor. createModel(value, language, new monaco. Uri().

Editor Integration - Prettier

prettier -vscode can be installed using the extension sidebar – it's called “Prettier - Code formatter.” Check its repository for configuration and shortcuts....

How to set up Prettier and automatic formatting on VS Code

Step 1: Install Prettier ... Click on the extension tab and type in Prettier. ... Once found, click on it to proceed to...

Code Pro Editor (Beta) - Standard Notes Documentation

Code Pro is a code editor powered by the Monaco Editor (Visual Studio Code). It is meant for writing Markdown and 60 other...