ACE 편집기 - CSS 용으로 장식하십시오.

Question

현재 여러 프로그래밍 언어의 편집기로 ace을 구현 중입니다. 나는 정말 아름답게 기능을 구현하려면 현재 나는이 방법을 사용합니다 슬프게도이 제대로 CSS를 지정하지 않을

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

합니다. 예 :이 변화하는 기재 코드를 통해 아름답게

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

: 여기

는 마술