概要
普段vim使っているのですがJS書くのにAtomが便利そうなので開発環境を整えました。
Atomに入れるプラグイン
- linter-eslint
- linter-flow
- ※他にも入れてるプラグインはありますがここでは上記2つをピックアップします
- ※prettier-atomもありますが今回は入れずにeslintのプラグインでやることにしました
linter-eslint
ファイル保存時にeslintチェックをして自動でコードを修正してくれるのがとても便利です。
今回はプラグインでprettierを入れたのでコードの整形も自動でやってくれます。
参考：prettierの使い方
基本はeslintrcにルールを書いてそちらにしたがってコードを修正してもらいます。なので必要なものを一式入れておきます。
$ npm install --save-dev \
babel-eslint \
babel-plugin-syntax-flow \
babel-plugin-syntax-jsx \
eslint \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-import-order-autofix \
eslint-plugin-prettier \
eslint-plugin-react \
eslint-plugin-flowtype \
prettier \
prettier-eslint
eslintrcはこちらを参考にしています。
https://github.com/mizchi/eslint-config-mizchi/blob/master/.eslintrc.yml
prettierでは末尾のセミコロンを省略、シングルクォーテーションを使うあたりの設定をしてあります。
prettier/prettier:
- 2
-
trailingComma: none
singleQuote: true
semi: false
あとはlinter-eslintの設定でファイル修正時に修正するチェックをつけておきます。
するとAtom上でeslintチェックをしてくれて、エラーがあれば教えてくれます。
そしてファイル保存時にそれらエラーとprettierのチェック項目を合わせて修正してくれます。
一気にコードがスッキリしました。
linter-flow
こちらも自動でflowのチェックをしてくれるので便利です。flow-binを入れてflowを動かせる環境を整えておきます。
$ npm install flow-bin@v0.57.3 -g
※最新の0.61.0だとうまく動かなかったのでバージョンを下げて入れました。
linter-flowはデフォルトのままで特に何もいじらなくて大丈夫です。
あとは勝手に型チェックをしてくれます。
(ちなみにeslintでprefer-constのルールを設定しているのでファイル保存時にletをconstに置換してくれてます)
おわりに
普段vimを使っているのであまりAtomなどを使わないのですが、この辺りまで設定すれば流石に便利だなーと思います。(ちなみにvim-mode-plusはもちろん入れてます。笑)
eslintとprettierの環境を整えておくと誰が書いてもある程度統一されたコードになるので人によってばらつきが出ることがなくチーム開発においてかなりいいのではないかなと思いました。