web-dev-qa-db-ja.com

Ace Editorで美容を使用するにはどうすればよいですか？

私はAceエディタで美化拡張機能を見つけましたが、それを使用する方法の例は何もありません。ここに私がこれまで持っているものがあります：

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

しかし、私はエラーが出ます：

Result of expression 'e' [undefined] is not an object.
ace-editor
11
1.21 gigawatts

これはうまくいくようです：

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セッションを渡す必要があります。元の質問では、変数を渡さなかったため、エラーが発生していました。

注：拡張機能のリリースノートに記載されているように、うまく機能しませんでした。使用するには十分に機能していませんでした。

13
1.21 gigawatts

機能しませんでした

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);
}
9
ErazerBrecht

同じ問題があった。結局自分のニーズに合う簡略化されたprettifyメソッドを構築しました（同じ行にすべてのものがあるわけではありません）。

ace Editorの react version を使用していましたが、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;
}
2
Guy

Beautifyファイルでbeautifyをwindows（global object）に指定するだけで、グローバルオブジェクトからbeautifyを呼び出すことができます。行330のext-beautify.js追加

window.beautify = exports;

その後、それを使用できます。

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

ページを開いたときにウィンドウが読み込まれた後、beautify.beautifyを実行して、editor.sessionを初期化する必要がある場合があります。

  window.addEventListener('load', () => {
    beautify.beautify(editor.session)
  })
0
dong jy

Aceエディターはphpに対してのみbeautifyを使用します-これはace docsに書かれています。

私にとって、最善の解決策はhttps://github.com/beautify-web/js-beautify

たくさんの設定があります、Js/CSS/HTML美化、npm、python、import、requiredなど.

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

その他のドキュメントと設定を参照 ここ

0
Kurkov Igor