Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to indent/prettify code on load of Monaco Editor #2664

Closed
batata004 opened this issue Sep 17, 2021 · 8 comments
Closed

How to indent/prettify code on load of Monaco Editor #2664

batata004 opened this issue Sep 17, 2021 · 8 comments
Labels
editor-core feature-request Request for new features or functionality

Comments

@batata004
Copy link

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?

@rcjsuen
Copy link
Contributor

rcjsuen commented 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.

@batata004
Copy link
Author

@rcjsuen I tried your suggestion but it looks like it only works with language:html. I am doing something wrong? When using css, php, js... your code will do nothing. Any idea?

@rcjsuen
Copy link
Contributor

rcjsuen commented 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)

@batata004
Copy link
Author

You are right! Javascript work too! That's already pretty nice, cause it was the main reason why I needed it! Thank you so much my friend!

One final question: I know I can select the amount of spaces/tabs to indent the code. Do you know if is possible to tell it to skip lines?

Instead of:

function xxx(){
    a = 3;
}

it would do:

function xxx(){

    a = 3;

}

?

@rcjsuen
Copy link
Contributor

rcjsuen commented Sep 17, 2021

One final question: I know I can select the amount of spaces/tabs to indent the code. Do you know if is possible to tell it to skip lines?

No, I don't know how to configure the formatter or if you even can.

@lsycxyj
Copy link

lsycxyj commented Oct 13, 2022

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)

It doesn't always work. For some slow pages (eg. multiple monaco editor instances), it doesn't work at all.

@hediet hediet added feature-request Request for new features or functionality editor-core labels Feb 8, 2023
@kyr0
Copy link

kyr0 commented Mar 13, 2023

None of these solutions worked for me. I'm calling editor.action.formatDocument when the editor is initialized and onDidLayoutChange is called, but nothing happens. I guess it's because the editor is initialized "off-screen", in a DOM node that is not yet visible. So, to deal with that, I'm simply simulating a scroll event, as this triggers the Monaco internal implementation to syntax-highlight, no matter what:

editorInstance.onDidLayoutChange(() => {
  requestAnimationFrame(() => {
    editorInstance
    .getDomNode()
        ?.querySelector(".editor-scrollable")
        ?.scroll({
          behavior: "smooth",
          top: 5,
        });
  });
});

@hediet
Copy link
Member

hediet commented Mar 13, 2023

Closing as duplicate of #115

@hediet hediet closed this as not planned Won't fix, can't repro, duplicate, stale Mar 13, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Apr 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
editor-core feature-request Request for new features or functionality
Projects
None yet
Development

No branches or pull requests

5 participants