Wie verwende ich Verschönerung in Ace Editor?

Question

Ich habe die Verschönerung Erweiterung in Ace-Editor gefunden, aber ich sehe keine Beispiele für die Verwendung. Hier ist, was ich bisher:

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

aber ich habe den Fehler:

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

Answer 1

Es sieht aus wie das funktioniert:

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

Es erfordert, dass Sie in der Ace-Editor-Sitzung übergeben als der erste Parameter. In meiner ursprünglichen Frage habe ich keine Variablen übergeben und das war ein Fehler.

Hinweis: Es hat nicht gut funktioniert, die in den Erweiterungen Release Notes erwähnt wurden. Es funktionierte nicht gut genug, um es zu benutzen.

Answer 2

Ich habe nicht es

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

Verschönern war immer undefined arbeiten.

Nach einer Weile gab ich auf.

und verwendet, um die externe Verschönern Bibliothek (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

In Verschönern Datei zu Windows punkt verschönert nur (globales Objekt) nach, dass Sie rufen aus dem globalen Objekt verschönern können. ext-beautify.js auf Zeile 330 hinzufügen

window.beautify = exports; 

Dann können Sie es verwenden.

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

Answer 4

Hatte das gleiche Problem. Beendet Aufbau einer vereinfachten Verschönerung Methode, die meine Bedürfnisse (die nicht alles auf der gleichen Linie haben).

Hinweis Ich verwendete die react version von Ace Editor, aber das gleiche gilt für JS. Kommentare werden nicht unterstützt, da sie in meinem generierten Code nicht enthalten sind. Möglicherweise müssen Sie die Methode erweitern, wenn Sie sie unterstützen möchten.

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

Hilfsmethoden:

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