PHPStorm2019.3でCode FormatterのPrettierを使えるようにする

はじめに

公式サイトのヘルプに解説があるのですが、行間が読み取れない部分や、Windowsのyarnの場合だとパスがわからなくて困ったので備忘録として作りました。

また、このドキュメントでは、prettierはGlobalでインストールを行います。プロジェクト個別にインストールをされる方は、このドキュメントでは説明していないので、公式サイトのヘルプを参考に設定を行ってください。

準備

1. node.jsをインストールする
2. yarnをインストールする
3. PHPStormのプラグインで「Prettier」をインストールする
   

Prettierをインストールする

1. PHPStormのターミナルまたは、Windowsのcmdを起動する
2. yarn global add prettierでインストールする
   

PHPStormにPrettierを設定する。

1. ファイル → 設定をクリックして、設定ダイアログを表示します。
2. 設定ダイアログの左上のサーチボックスにprettierと入力します(①)。
   　
3. 「言語＆フレームワーク」→「JavaScript」→「Prettier」をクリックします(②)
4. Nodeインタープリターは、PHPStormが自動検知して入っていると思いますが、未検知の場合は、ご自分で設定を行ってください(③)。たぶん、"C:\Program Files\nodejs\node.exe"にあると思います。
5. Prettier　パッケージとして、C:\Users\<ユーザ名>\AppData\Local\Yarn\Data\global\node_modules\prettierを設定します。ここがわからなくてnpmでもprettierを入れてしまいましたTT
6. 最後にOKボタンをクリックして設定を保存します。

Prettierで再フォーマットする

ctrl+shift+Aで検索ダイアログをだして、アクションからPrettierで再フォーマットを選択するとフォーマットされます。

私の環境ですとCtrl + Alt + Shift + Pに割り当てられているので、こちらでも実行できました。

Prettierコードスタイルルールを適用するには?

プロジェクトに.prettierrを作成して、以下のようなコードスタイルルールを記述します。

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

このファイルを作成後、package.jsonを開いたら、公式ヘルプにもある通り、適用するかどうかがと確認が出てきます。

保存時にPrettierが実行されるようにする。

こちらの記事を参考に設定を行ってください。
WebStormで自動保存時にPrettierを実行するようにしたら、キレイなコーディングがとても捗る。

参考URL

• PHPStormでCode FormatterのPrettierを使えるようにする
  *WebStormで自動保存時にPrettierを実行するようにしたら、キレイなコーディングがとても捗る。