PHPStormでCode FormatterのPrettierを使えるようにする

やりたいこと

PHPStormで開発中のJavascriptコードをコードフォーマッタにかけたくなったので、どうやったらできるのかをまとめました。

Prettier

使ったCode FormatterはPrettier。
Starが24192、Forkが1105というバケモノCode Formatter。
私は今まで知りませんでしたが、Code Formatter界でも指折りの存在なのでしょうか？

インストール

これをターミナルで叩くだけ。

npm install --global prettier

使い方

とても簡単で丁寧な説明が公式に書かれています。
https://prettier.io/docs/en/webstorm.html#using-prettier-as-external-tool

Go to Preferences | Tools | External Tools and click + to add a new tool. Let’s name it Prettier.

PHPStorm(WebStorm)のPreferences開いて、Toolsを開き、その中のExternal Toolsを開いて、+ボタンをクリックして新しいPHPStormのToolを作ろう。Prettierって名前にすればいいよ。

と、とても簡単な説明なので安心して読めます。

設定

1. .prettierrcというjsonファイルを作成
2. 中身を書く

例えばこんなの。

{
  "printWidth": 100,
  "parser": "flow"
}

実行させる

ショートカットのCmd/Ctrl-Shift-Aをすると、ツール検索ウィンドウが表示されるので、Prettierと入力するとPrettierが表示されます。
それを選択すると、コードが綺麗に整います。