More than 5 years have passed since last update.

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

Posted at 2018-05-07

やりたいこと

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

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

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

npm install --global prettier

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って名前にすればいいよ。

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

例えばこんなの。

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

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