こんにちは！Prettierにそろそろ飽きてきたMizutani(@sirycity)です。でもdprintとかRomeに移行する勇気は無く...

今日はそんなPrettierのちょっとしたネタです。

Prettierとは

JavaScriptのコードフォーマッターのデファクトスタンダードです。まあこれ見ている人は知ってるよな

コードフォーマッターとは

コードのスペース開けたり改行したりを自動でいい感じにしてくれるやつです。

Prettierの波括弧

当然のようにPrettierは波括弧も綺麗にフォーマットしてくれます。こう。

const foo = {
  bar: {
    baz: {
      qux: 'quux',
    },
  },
}

階段状になって。きれいなインデントですね。

唐突すぎる余談

とあるエンジニア曰く JavaScriptのコードは遠目に見ると天の川に見えるそうです。なんてロマンチックなんでしょう。Prettierのつけるインデント+元々小さな記号の多い言語なので、コード全体が左右にゆらゆらと揺れて見えます。記号は輝く星のようですね。VSCodeのミニマップとかで見てみてください。

まあとあるエンジニアって僕のことですけどね。

Prettierは同じ形状になるわけじゃない

ところでこれはPrettier使ってる人も忘れがちですが Prettierは書かれているコードを毎回同じ形にするわけではないです。

これはよく考えてみれば当たり前で、例えば全部の行にみっちり書かれている文字列を

'あああああ'
'いいいいい'
'ううううう'

間にスペースを入れて1行飛ばしにして

'あああああ'

'いいいいい'

'ううううう'

その後にフォーマットをかけてもスペースがなくなるわけではありません。そのままです。一方でスペースを2行入れるとちゃんと1行に減ります。

波括弧のフォーマット

ところで波括弧は何もしないと↑のように階段状になります。勿論これも綺麗なんですが 今回の例みたいに全部のオブジェクトのキーが1個だけだとちょっと冗長 に感じなくもないです。

そんな時こそPrettierの特性の出番で、いったん手動でオブジェクトを無理やり1列に収めます。

const foo = { bar: { baz: { qux: 'quux' } } }

そしたらフォーマット！なんということでしょう、波括弧は階段状に戻りません。以上。おわりです。あんまり長いと勝手に改行されますが、短ければキー2つとかでも大丈夫です。

用途

フロントエンドの各種ツールの設定ファイルだとキー1個だけのオブジェクトが結構あります。そんな時に使ってみると良いんじゃないかな？

さいごに

Prettier、ごくごくシンプルなツールなんですがずっと使ってると細かい発見があってなかなかおもしろいです。またなんか見つけたら書くかも！以上。