タイトル時点で何かニッチな感じがする。時間のないときに限って気になってしまうものですよね…。

なんの話か

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.

だそうです（https://www.npmjs.com/package/pug-beautify）。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:

デフォルトのインターフェイスにはないけれど値が追加されると、とりあえず出しておこう、みたいになるんでしょうか（調べてない）。