JetBrains IDE で Prettier 設定メモ

はじめに

久々に新規でプロジェクトを開始したら要点を忘れていたので備忘録。

Prettier の設定

JatBrains IDE では Typescript のインデントは 4 になっている (Typescript のインデント幅は議論があるようですが、一般的には 2 の方が多そう) のでここは調整したい。ので Prettier の設定をします。

https://pleiades.io/help/webstorm/prettier.html

Prettier のインストールをします。

npm install --save-dev --save-exact prettier

package.json に Prettier のオプション設定を追加します。
Prettier のオプション定義はいくつか方法がありますが、私は package.json に書くようにしています。

package.json

"prettier": {
    "tabWidth": 2,
    "singleQuote": true,
    "jsxSingleQuote": true
  },

• インデント幅を 2
• 文字列の囲みはシングルクォート (JSX も)

とだけしていますが、その他オプションは公式で。

https://prettier.io/docs/en/options.html

IDE の設定で "Language & Frameworks > JavaScript > Prettier" で "Disable Prettier" を外して有効にします。

以上で JetBrains IDE 上で Prettier が有効になります。
コード入力時は IDE 既定の書式設定に沿うようですが、適宜コードフォーマットを実行することで設定した書式に正規化されます。