Как использовать украшение в редакторе Ace?

Question

Я нашел расширение beautify в редакторе Ace, но я не вижу примеров того, как его использовать. Вот то, что я до сих пор:

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

, но я получаю сообщение об ошибке:

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

Answer 1

Похоже, это работает:

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

Это требует, чтобы вы передаете сессии Ace Editor как первый параметр. В моем первоначальном вопросе я не передавал никаких переменных, и это вызывало ошибку.

Примечание: Это не работает хорошо, о чем упоминалось в примечаниях к выпуску расширений. Он не работал достаточно хорошо, чтобы использовать.

Answer 2

Я не получить его работы

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

Beautify всегда был undefined.

Через некоторое время я сдался.

И использовал внешнюю библиотеку 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

В украсят файл только точку украсит для окон (глобальный объект) после этого вы можете позвонить украсите из глобального объекта. доб-beautify.js по строке 330 добавить

window.beautify = exports; 

Затем вы можете использовать его.

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

Answer 4

Была такая же проблема. Закончилось , построив упрощенный метод, который соответствует моим потребностям (которые не должны иметь все на одной линии).

примечание Я использовал react version редактора Ace, но то же самое относится к JS. Он не поддерживает комментарии, поскольку мой сгенерированный код не содержит их, и вам может понадобиться расширить этот метод, если вы хотите их поддержать.

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

вспомогательные методы:

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