How do I use beautify in Ace Editor? - ace-editor

Question

I've found the beautify extension in Ace editor but I don't see any examples of how to use it. Here's what I have so far:
var beautiful = ace.require("ace/ext/beautify");
beautiful.beautify();
but I get the error:
Result of expression 'e' [undefined] is not an object.

Answer 1

It looks like this works:
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
var editor = ace.edit("editor"); // get reference to editor
beautify.beautify(editor.session);
It requires that you pass in the Ace Editor session as the first parameter. In my original question, I did not pass in any variables and that was throwing an error.
Note: It did not work well which was mentioned on the extensions release notes. It was not working well enough to use.

Answer 2

I didn't get it working
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
Beautify was always undefined.
After a while I gave up.
And used the external Beautify library (Link)
function beatify() {
var val = editor.session.getValue();
//Remove leading spaces
var array = val.split(/\n/);
array[0] = array[0].trim();
val = array.join("\n");
//Actual beautify (prettify)
val = js_beautify(val);
//Change current text to formatted text
editor.session.setValue(val);
}

Answer 3

Had the same problem. Ended up building a simplified prettify method that fit my needs (which are not to have everything on the same line).
note I was using the react version of Ace Editor but same applies to JS. It does not support comments as my generated code does not contain them and you may need to expand the method if you wish to support them.
const html = prettifyHtml('<div id="root"><div class="container"><div class="row"><div class="col-lg-6">hello there<p>What <strong>is</strong> this? <br /> yes</p></div><div class="col-lg-6"></div></div></div></div>');
const scss = prettifyScss('.container { strong {color:green; background-color:white; border:1px solid green; &:hover {cursor:pointer} } }');
<AceEditor
mode="html" // or "scss"
theme="github"
defaultValue={html} // or scss
onChange={this.onChange.bind(this)}
/>
html:
export const prettifyHtml = (html) => {
let indent = 0,
mode = 'IDLE',
inTag = false,
tag = '',
tagToCome = '',
shouldBreakBefore = false,
shouldBreakAfter = false,
breakBefore = ['p', 'ul', 'li'],
breakAfter = ['div', 'h1', 'h2', 'h3', 'h4', 'p', 'ul', 'li'];
return html
.split('')
.reduce((output, char, index) => {
if (char === '<') {
tagToCome = whichTag(html, index);
shouldBreakBefore = tagToCome && breakBefore.indexOf(tagToCome) >= 0;
mode = 'TAG';
inTag = true;
output += (shouldBreakBefore ? br(indent) : '') + '<';
} else if (char === '/' && mode == 'TAG') {
mode = 'CLOSING_TAG'
inTag = true;
output += '/';
} else if (char === ' ') {
inTag = false;
output += ' ';
} else if (char === '>') {
if (mode === 'TAG' || mode === 'CLOSING_TAG') {
indent += mode === 'TAG' ? +1 : -1;
shouldBreakAfter = breakAfter.indexOf(tag) >= 0;
inTag = false;
tag = '';
}
output += '>';
output += shouldBreakAfter ? br(indent) : '';
} else {
output += char;
if (inTag) {
tag += char;
}
}
return output;
}, '');
}
sass:
export const prettifyScss = (scss) => {
let indent = 0,
closeBefore = 0;
return scss
.split('')
.reduce((output, char) => {
closeBefore++;
if (char === '{') {
indent++;
output += '{' + br(indent);
} else if (char === '}') {
indent--;
output += br(indent) + '}' + (closeBefore > 3 ? '\n' : '') + _tabs(indent);
closeBefore = 0;
} else if (char === '.') {
output += br(indent) + '.';
} else if (char === ';') {
output += ';' + br(indent);
} else {
output += char;
}
return output;
}, '');
}
helper methods:
const _tabs = (number) => {
let output = '';
for (let cnt = 0; cnt < number; cnt++) {
output += '\t';
}
return output;
}
const br = (indent) => {
return '\n' + _tabs(indent);
}
export const whichTag = (html, index) => {
let inTag = true,
tag = '';
const arr = html.split('');
for (let i = index + 1; i < index + 10; i++) {
const char = arr[i];
if (char >= 'a' && char <= 'z' && inTag) {
tag += char;
} else if (char !== '/') {
inTag = false;
}
}
return tag;
}

Answer 4

Faced the same issue but fixed it by adding two script files.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-beautify.js"></script>

Answer 5

You may need to execute the beautify.beautify after window is loaded when open the page so that editor.session is initialized.
window.addEventListener('load', () => {
beautify.beautify(editor.session)
})

Answer 6

Ace editor use beautify only for php, - it is written in ace docs.
For me, the best solution was https://github.com/beautify-web/js-beautify
There are a lot of settings, Js/CSS/HTML beautifying, work with npm, with python, by import, by required etc.
import beautify from 'js-beautify';
// your code
beautifyHTML() {
this.html = beautify.html(this.html, {
indent_size: '2',
indent_char: ' ',
max_preserve_newlines: '5',
preserve_newlines: true,
keep_array_indentation: false,
break_chained_methods: false,
indent_scripts: 'normal',
brace_style: 'expand',
space_before_conditional: true,
unescape_strings: false,
jslint_happy: false,
end_with_newline: false,
wrap_line_length: '80',
indent_inner_html: true,
comma_first: false,
e4x: false
});
}
see more docs and settings here

Answer 7

In beautify file just point beautify to windows(global object) after that you can call beautify from the global object.
ext-beautify.js on row 330 add
window.beautify = exports;
Then you can use it.
vm.session = vm.editor.getSession();
beautify.beautify(vm.session);