Prettier 小ネタ

Sosuke Suzuki 2021/10/08

メンテしてて「そんな機能あったんだ...」ってなった機能や、自分で追加した「誰も気づかないだろうなーこの機能」っていうものを見つけたら貼る場所

Sosuke Suzuki 2021/10/08

/* HTML */ みたいなコメントでテンプレートリテラルをその言語としてフォーマットできる。

--parser babel

Input:

const foo  = /* HTML */ `<div><p>hogehoge</p><span>happy</span></div>`

Output:

const foo = /* HTML */ `<div>
  <p>hogehoge</p>
  <span>happy</span>
</div>`;

Sosuke Suzuki 2021/10/08

lang 属性をつけると Vue の custom block をフォーマットできる。詳細わすれたけど実装がすげーだるかった記憶がある。

Prettier 2.4.1
Playground link

--parser vue

Input:

<custom-block lang="json">
  [{ "one": 1, "two": 2, "three": 3},{ "one": 1, "two": 2, "three": 3},{ "one": 1, "two": 2, "three": 3}]
</custom-block>

Output:

<custom-block lang="json">
[
  { "one": 1, "two": 2, "three": 3 },
  { "one": 1, "two": 2, "three": 3 },
  { "one": 1, "two": 2, "three": 3 }
]
</custom-block>