I created an ACE editor instance using the following code:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

#editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src=".1.9/ace.js"></script>

<div id="editor">function foo (x) {
    return 2 * x;
}

function bar (y) {
    return foo(y) / 2;
}

console.log(bar(2) + foo(3));</div>

I created an ACE editor instance using the following code:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

#editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js"></script>

<div id="editor">function foo (x) {
    return 2 * x;
}

function bar (y) {
    return foo(y) / 2;
}

console.log(bar(2) + foo(3));</div>

I want to control the indent size (especially when pressing the tab key). How can I do that?

I searched in the API reference but I couldn't find the solution...

• javascript
• indentation
• ace-editor

1 Answer 1

you can use setOption("tabSize", 8) or similar setOptions function shown bellow

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setOptions({
    mode: "ace/mode/javascript",
    tabSize: 8,
    useSoftTabs: true
});

#editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js">
</script>

<div id="editor">function foo (x) {
    return 2 * x;
}</div>