noimage

create-react-appにprettierを効かせる設定

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

https://qiita.com/kiida/items/405bb07c4b52bfee0219

https://prettier.io/docs/en/vim.html

(Visited 1 times, 1 visits today)