ACE 编辑器 - 美化 CSS答案

【问题标题】：ACE Editor - Beautify for CSSACE 编辑器 - 美化 CSS
【发布时间】：2016-06-15 09:45:11
【问题描述】：

我目前正在实现ace 作为几种编程语言的编辑器。我真的很想实现一个美化功能，目前我使用这种方法：

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

More info

遗憾的是，这并没有正确格式化 CSS。示例：

.class1 .subClass { color: red; }

通过所描述的代码美化了

.class1.subClass{
    color:red;
}

你可以看到选择器中的所有空格都被删除了，这改变了规则的目标。

我的代码错了吗？ ace中的CSS是否有替代美化器？

作为后备，我会删除不是理想解决方案的功能。

TL;DR

是否有可以正确美化 CSS 的 ace 插件/扩展？难道我做错了什么？

【问题讨论】：

你可以使用JSBeautify来美化你的JS、HTML和CSS。它非常易于使用，您可以在 ace 编辑器中查看美化 HTML 的演示 here

标签： javascript ace-editor

【解决方案1】：

好吧，我找到了一个不错的 css beautifier，并将其添加到我的解决方案中。

这就是魔法：

container.querySelector('.editor_beautify').addEventListener('click', function () {
    var currentMode = editor.session.$modeId.substr(editor.session.$modeId.lastIndexOf('/') + 1);
    switch (currentMode) {
        case modes.css:
            util.formatCss(editor, configuration.scriptBase);
            break;
        default:
            util.ensureScript(configuration.scriptBase + 'ext-beautify.js', function () {
                var beautify = ace.require("ace/ext/beautify").beautify(editor.session);
            });
    }
});

formatCss: function (editorAce, scriptBase) {
    var unformatted = editorAce.getValue();
    if (unformatted.trim().length > 0) {
        util.ensureScript(scriptBase + 'cssbeautify.js', function () {
            editorAce.getSession().setUseWrapMode(false);
            var formatted = cssbeautify(unformatted, {
                indent: '  ',
                openbrace: 'end-of-line',
                autosemicolon: true
            });

            editorAce.setValue(formatted);
            editorAce.getSession().setUseWrapMode(true);
        });                
    }
}

【讨论】：