ACE Editor - CSS用の美化

Question

私は現在いくつかのプログラミング言語のエディタとして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; 
} 

に変化します。

コードが間違っていますか？エースでCSSのための代替美化器はありますか？

フォールバックとして、私は理想的な解決策ではない機能を削除します。

TL; DR

は正しくCSSを美化することができエース用のプラグイン/拡張機能はありますか？私は何か間違っているのですか？

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