PrettierのTrailing Commaが動作するパターン、しないパターン

この内容について

Trailing Commaの動作パターンを正しく理解しておらず、設定にハマってしまったので反省のための忘備録。

結論

PrettierのTrailing Commaは1行では動作せず、複数行で動作する。
下記は簡単なサンプルだが1行あたりの最大文字数(= Print Width)で1行にフォーマットされて見落としてしまうため注意。対策として、変数宣言含め1行で80文字以上のオブジェクトか配列を作れば正確に確認できる(Print Widthがデフォルトの80文字とする)

// NG
const notWork = { hoge: 0, foo: 1 }

// OK
// 実際のコードでは下記の場合は短いため1行にフォーマットされカンマも取り除かれるため注意
const work = {
  hoge: 0,
  foo: 1,
}

// OK
// これなら1行にフォーマットされることはないので正確に確認できる
const better = {
  hoge: 1234567890,
  foo: 1234567890,
  huga: 1234567890,
  piyo: 1234567890,
}

参考

Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)

複数行で動くと書いてあったのに見落としてしまって痛い。自身の英語力不足を痛感した。
https://prettier.io/docs/en/options.html#trailing-commas

自分の勘違いに気がついたイシュー
https://github.com/prettier/prettier/issues/2655