제목 시점에서 뭔가 틈새 느낌이 든다. 시간이 없을 때만 궁금해지는 것이군요…

무슨 말인가?

Vue 의 단일 컴퍼넌트 파일 *.vue 를 atom-beautify 로 성형하면 , 뭐 괜찮은 것 성형 하는 것이군요, 무서운 것에. 그런데 <template lang="pug"> 로 사용하고 있으면, 왠지 여기만 들여쓰기가 탭이 된다. 왜.

팁

모두 (?) 곤란한 것입니다.

Wrong indent char when beautify <template lang='pug'> part in vue files. #1747

코드를 망설이면 고쳤습니다. pug-beautify의 코드 괴롭히고 있는 것 같습니다만, 아니아니 원래 이것이 옵션이 제대로 건너지 않았다고 하는 것은 뭐라고는. 그 전에 옵션은 뭐야.

옵션이란 무엇인가?

왠지 신경이 쓰여 버렸기 때문에 쫓기로 했습니다. Atom은 끔찍한 것에 디버그 콘솔을 낼 수 있죠. 사용하고 있습니까? 뭐야 이 에디터.

로드된 파일의 트리에서 수상한 것을 찾아… 음.atom-beautify/src/beautifier/vue-beautifier.coffeescript 그렇지요.

안을 읽어 보면, 정규 표현으로 template, style, script의 각 태그를 구분해, 한층 더 lang도 읽어 적절한 beautifier에 건네주게 되어 있습니다. 알겠습니다. 어쩐지 상상이 붙어 왔습니다만, 브레이크 포인트를 넣어 내용을 보고 싶습니까.



그래. 무언가 이것 보았다 이다. atom-beautify의 Vue 설정에 있는 항목이군요. 그것이 그대로 전달되고 있다. pug-beautify에.

pug-beautify 설정은

fill_tab : true/false,default true, fill whether tab or space.
omit_div : true/false,default false, whether omit 'div' tag.
tab_size : number, default 4, when 'fill_tab' is false, fill 'tab_size' spaces.

그렇습니다 ( htps //w w. 음 pmjs. 코 m / Pac 카게 / Pug-be 아우치 fy ). atom-beautify의 Vue 설정 항목과는 호환되지 않는 것 같다.

하지만 결국, 설정이 단순히 건네지고 있을 뿐이니까, 스스로 쓰면 좋다.

결론

config.cson의 atom-beautify 설정에 다음과 같은 것을 추가한다.

"*":
  "atom-beautify":
    vue:
      fill_tab: false
      tab_size: 2

고찰

이것, 이런 사양일지도 모르지만, atom-beautify/vue의 설정을 그대로 건네주는 것이 아니고, 제대로 컨버트하면 좋을 뿐이지. 이런 식으로.

diff --git a/src/beautifiers/vue-beautifier.coffee b/src/beautifiers/vue-beautifier.coffee
index 6c693b9..764749b 100644
--- a/src/beautifiers/vue-beautifier.coffee
+++ b/src/beautifiers/vue-beautifier.coffee
@@ -22,7 +22,10 @@ module.exports = class VueBeautifier extends Beautifier
           when "template"
             switch lang
               when "pug", "jade"
-                require("pug-beautify")(text, options)
+                require("pug-beautify")(text,
+                  fill_tab: options.indent_with_tab
+                  tab_size: options.indent_size
+                )
               when undefined
                 require("js-beautify").html(text, options)
               else

다만 실제로 해 보면, options.indent_size 의 설정을 읽을 수 없다 (디폴트로부터 덧쓰기되어 있지 않다) 생각이 든다. 그것은 Atom측의 사양과 같은… 여유가 있을 때 제대로 쫓는다…일지도 모른다…

덤

설정을 덧붙이면 재밌게 나오는 UI.

before:


after:


디폴트의 ​​인터페이스에는 없지만 값이 추가되면(자), 우선 내놓아 두자, 같게 될까요(조사하지 않는다).