Come si usa abbellire in Ace Editor?

Question

Ho trovato l'estensione beautify nell'editor Ace ma non vedo alcun esempio su come usarlo. Ecco quello che ho finora:

var beautiful = ace.require("ace/ext/beautify"); 
beautiful.beautify(); 

ma ottengo l'errore:

Result of expression 'e' [undefined] is not an object. 

Answer 1

Sembra che questo funziona:

var beautify = ace.require("ace/ext/beautify"); // get reference to extension 
var editor = ace.edit("editor"); // get reference to editor 
beautify.beautify(editor.session); 

Si richiede che si passa nella sessione Ace Editor come il primo parametro. Nella mia domanda iniziale non ho passato nessuna variabile e questo è stato un errore.

Nota: non ha funzionato bene quali sono stati citati nelle note di rilascio delle estensioni. Non funzionava abbastanza bene da usare.

Answer 2

non ho capito di lavoro

var beautify = ace.require("ace/ext/beautify"); // get reference to extension 

Abbellire ero sempre undefined.

Dopo un po 'mi sono arreso.

e abbiamo usato la libreria esterna Beautify (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

Nel file di abbellire solo punto di abbellire per finestre (oggetto globale) dopo che è possibile chiamare abbellire dall'oggetto globale. ext-beautify.js nel braccio 330 aggiungono

window.beautify = exports; 

Quindi è possibile utilizzarlo.

vm.session = vm.editor.getSession(); 
beautify.beautify(vm.session); 

Answer 4

Aveva lo stesso problema. Terminato costruendo un metodo di prettifica semplificato che si adatta alle mie esigenze (che non devono avere tutto sulla stessa linea).

note Stavo usando il react version di Ace Editor ma lo stesso vale per JS. Non supporta i commenti poiché il mio codice generato non li contiene e potrebbe essere necessario espandere il metodo se si desidera supportarli.

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; 
     }, ''); 
} 

metodi di supporto:

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