コネヒト開発者ブログ

コネヒト開発者ブログ

サーバーサイドエンジニアがPhpStormでJSを書くために設定したこと

f:id:supermanner:20180612125259p:plain いつもコネヒト開発者ブログを読んでくださっている皆さま、こんにちは。 サーバーサイドを書いている結城(@super_manner)です。
最近は通勤途中に海外ドラマのシリコンバレーを見ることにハマっています。 好きな登場人物はギルフォイルです。過激なワードのリスニング力が上達しましたw

さて、導入の自己紹介やタイトルでも触れましたが、私はコネヒトでは普段サーバーサイドを担当しており、PhpStormを使用してAPIを書いているのですが、ひょんなことから最近はフロントエンドのIssueにもチャレンジすることになりました。
すごく新鮮なので、毎日楽しくコードを書いています(^^)

初めは社内のフロントエンドエンジニアから便利なパッケージを教えてもらえることもあり、JSを書くときのみAtomを使用していたのですが、数ヶ月つづけていると、フロントエンドとバックエンドを書くときでエディタを切り替えるのがやっぱりめんどくさい!!!と感じるようになりました。
そこで、コーディングに使用するツールを今まで使用してきた馴染みのあるPhpStormに寄せてしまうことにしました。

いろいろ強力な機能を持っているPhpStormですが、今回はこれがないとJSを書くときに辛いなぁと感じた基本的な「Flow」と「Prettier」の設定についてご紹介します。
意外とまるっとまとまっている日本語の記事がなかったので、参考になれば幸いです。

参考:コネヒトのフロントエンドについての記事です 👇 tech.connehito.com

Flowの設定

コネヒトでは型チェックにFlowを使用しています。 下記の手順で設定することによって、型が間違っているとFlowのタブが立ち上がり教えてくれます。

  1. Preference -> Language & Frameworks -> JavaScript を開く
  2. JavaScript language versionを Flow に設定 (すると Flow and JSX in ECMAScript6 も読んでくれました)
  3. Flow package or executable の項目にFlowのpathを記入する

f:id:supermanner:20180606191449p:plain

型が変だと、このようなタブが開きます 👇 f:id:supermanner:20180606191523p:plain

prettierの設定

すでに多くの方が導入されているであろうprettierも一緒に設定してしまいます。ファイルの変更をリアルタイムに検知して修正してもらいたいので、File Watchersを使います。JetBrainsのブログにわかりやすくまとまっていたので参考にしました。 今回はeslintの設定を噛ませているのでprettier直実行ではなくeslintでの実行となります。 コネヒトの環境はこちらの記事でご紹介しているので、興味があれば見てみてください! (githubはこちら) tech.connehito.com

  1. Preference -> Tools -> File Watchers を開く
  2. +を押して新規作成し、好きな名前をつける
  3. 整形対象のFileと監視対象のScopeを選択する
    1. 今回はtypeはJavaScriptにしました
    2. Scopeは余計な設定系のJS Fileまで監視しないように設定しておくのがいいかなと思います
  4. Tool to Run on Changeに必要なものを記載していく
    1. Programの項目に, eslintの実行ファイルのpathを記載
    2. Arguments に eslintrc --fix $FilePathRelativeToProjectRoot$ を記載
    3. OutPut paths to refreshに -c /path/to/.eslintrc --fix $FilePathRelativeToProjectRoot$ を記載
    4. Working directoryに $FilePathRelativeToProjectRoot$を記載
  5. お好みでAdvanced Optionsを設定

f:id:supermanner:20180606191735p:plain

こちらもSyntax Errorがあると、タブが開いて教えてくれます👇 f:id:supermanner:20180606191813p:plain

ちなみに、IDE自体の設定なのですがAuto Saveの設定をしていると何回もFile Watcherが走って大変重いので、差支えがなければ外しておいたほうが良いかもしれません。 この辺りはまだまだ未知の設定がありそうなので、もっと早く出来る設定があれば是非共有していただきたいです!

また、本エントリーでは触れていませんが、Extra Toolとして設定して任意のタイミングで実行する方法も公式ブログにありますので見てみてください!

最後に

私はなんとなくずーっとJSに苦手意識を持っていたのですが、普段自分が使っているツールを使いつつ自動でやってくれるところは任せていくことで、 だんだんと苦手意識も薄まりフロントエンドのコーディングが楽しくなってきました(^^)
とはいえ、まだまだ知らないことがたくさんあるので日々のIssueと向き合いながら勉強していきたいと思います! もし同じようなことを思っている方がいて、この記事がちょっとでも踏み出す一歩になれば幸いですmm