如何在 Ace Editor 中使用美化功能?
Posted
技术标签:
【中文标题】如何在 Ace Editor 中使用美化功能?【英文标题】:How do I use beautify in Ace Editor? 【发布时间】:2015-10-24 08:46:08 【问题描述】:我在 Ace 编辑器中找到了美化扩展,但我没有看到任何如何使用它的示例。到目前为止,这是我所拥有的:
var beautiful = ace.require("ace/ext/beautify");
beautiful.beautify();
但我得到了错误:
Result of expression 'e' [undefined] is not an object.
【问题讨论】:
【参考方案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 会话作为第一个参数传入。在我最初的问题中,我没有传入任何变量,这会引发错误。
注意:在扩展发行说明中提到的效果不佳。使用起来不够好。
【讨论】:
你能解释一下你的答案吗? 别忘了包含 ext-beautify.js 将此行添加到您的 html 中:<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-beautify.js" type="text/javascript" charset="utf-8"></script>
这个版本和 ace 自带的版本不同吗?
我是这个扩展的作者。我最近提交了一个重大的重写,它的效果要好得多,尤其是对于 js beautify 不太擅长的混合模式文档。【参考方案2】:
我没有得到它的工作
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
美化始终是undefined
。
过了一会儿我放弃了。
并使用了外部美化库(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);
【讨论】:
以上链接已移至 - github.com/beautify-web/js-beautify 或 beautifier.io 可能你得到undefined
,因为你还没有导入ext-beautify.js
文件【参考方案3】:
遇到了同样的问题。最终构建了一个简化的美化方法,以满足我的需求(不是让所有东西都在同一条线上)。
请注意,我使用的是 Ace Editor 的 react version,但同样适用于 JS。它不支持 cmets,因为我生成的代码不包含它们,如果您希望支持它们,可能需要扩展该方法。
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;
, '');
萨斯:
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;
【讨论】:
【参考方案4】:遇到了同样的问题,但通过添加两个脚本文件解决了这个问题。
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-beautify.js"></script>
【讨论】:
【参考方案5】:您可能需要在打开页面时在加载窗口后执行beautify.beautify
,以便初始化editor.session
。
window.addEventListener('load', () =>
beautify.beautify(editor.session)
)
【讨论】:
【参考方案6】:Ace 编辑器仅对php
使用美化,它是在 ace 文档中编写的。
对我来说,最好的解决方案是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
);
查看更多文档和设置here
【讨论】:
【参考方案7】:在美化文件中,只需将美化指向窗口(全局对象),然后您就可以从全局对象调用美化。 ext-beautify.js 在第 330 行添加
window.beautify = exports;
那你就可以用了。
vm.session = vm.editor.getSession();
beautify.beautify(vm.session);
【讨论】:
以上是关于如何在 Ace Editor 中使用美化功能?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用自定义模式在 Ace Editor 中集成语法检查?