Edited at

JSのコードの自動整形に Prettier が便利だったので、eslint とAtomから使えるように設定した

More than 1 year has passed since last update.

https://github.com/prettier/prettier

vjeux先生謹製のコード整形ツール。Reactでも使われてる。

gofmt やあのへんを目指してるっぽい。


eslint で使う

この辺

yarn add eslint babel-eslint prettier eslint-plugin-prettier eslint-config-prettier -D

自分はStandard派だったので、シングルクオート、ノーセミコロンにした。opinionated なフォーマッタにオプション付けるのはどうなの?という気持ちはありつつ、セミコロンを見たくないという気持ちが勝った。


.eslintrc.yml

parser: babel-eslint

plugins:
- prettier
extends:
- prettier
- prettier/flowtype
- prettier/react
rules:
prettier/prettier:
- 2
-
trailingComma: none
singleQuote: true
semi: false

yarn eslint -- src --fix などして既存のコードに適用した。


atom

apm install atom-prettier

ここでもシングルクオート、セミコロンを消す設定をしつつ、プラグインの設定画面からローカルのeslintを見るようにした。ファイル保存時に自動で走るようにした。

自分の設定全体はこちら

https://github.com/mizchi/eslint-config-mizchi/blob/master/.eslintrc.yml