How do I use beautify in Ace Editor?

问题

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.

回答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 were mentioned on the extensions release notes. It was not working well enough to use.

回答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);
}

回答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"><a href="#">hello there</a><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;
}

回答4:

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);

回答5:

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

回答6:

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)
  })

来源：https://stackoverflow.com/questions/31767051/how-do-i-use-beautify-in-ace-editor

标签

ace-editor