create-react-appにprettierを効かせる設定
はなんでも設定してくれている状態なのですが、
prettierはdefaultでありません
githubのissueによると
我々は実際のerrorに対するものだけをサポートするとあります
https://github.com/facebook/create-react-app/issues/3262#issuecomment-335649526
もし使いたかったらこちらを見て設定してね
と書かれています
creat-react-appからの設定は
ここの通りにやれば動きます
コミットした際に自動的にダブルクォートがシングルクォートに書き換わります
他prettierの設定を追加したい
・コミット時にprettierを効かせる
・vimで編集してprettierを効かせる
・eslintとのstyle設定のコンフリクトをなくす
vim設定
自分はVundleを使っているのですが
.vimrcに
Plugin 'sbdchd/neoformat'
PluginInstalを実行して
exモードでPrettierを実行
Prettierを整形したあとeslintを走らせたい
yarn add -D eslint prettier-eslint prettier-eslint-cli
eslintを使うために必要な知識
・yarnはeslint --initは効かないので手動で作る
・node_modules内はlint無視されるので何か除外する記述をする必要がない
・extendsで誰かのルールを使う(下記共有設定で説明)
・独自のルールをrulesへ記述(extendsで指定したルールをoverrideする)
・rulsのあたいは配列にすることができて["error", "never"]などconsole出力を制御
・
[共有設定]
extendsの値に入れることで作成者のeslint-config設定を使うことができる。
誰かが作ったruleを自分のプロジェクトに取り込む
例えばgoogleのeslint設定を使いたい場合
npm install -g eslint eslint-config-google
eslintをinstall。(してあったらいらない)
eslint-config-google
["google"]
prettierが作ったルールなら
eslint-config-prettier
をinstallして
eslint-configを抜かしたprettierの部分を配列の要素にする
["prettier"]
同様に
create-react-appのeslintは
eslint-config-react-app。
["react-app"]
となる
参照
https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8