経緯
BlogFeedbackで使っているcreate-react-appを3.0に上げたらTypeScriptにもLintが効くようになっていたが、そのせいでいきなりビルドが止まるようになってしまった
- 元々TSLintを入れてエディタとCIでTSLintを実行していた
- create-react-app 3.0から
yarn start
やyarn build
でESLintが実行される- TypeScriptには@typescript-eslintで対応してるみたい
- 新しく入ったESLintは無設定状態だとデフォルトのルール (eslint-config-react-app)で実行されるので、TSLintで設定していなかったいくつかのルールで引っかかるようになって、CIで
yarn build
が止まっていた- eslint-config-react-appには
jsx-a11y
react-hooks
プラグインが入っていたので、その辺で落ちていた
- eslint-config-react-appには
- 今後はESLintになる流れらしいので、この際なのでESLintに移行して、ルールもデフォルトに合わせることにした
ESLint対応
prettier対応だけして、あとはデフォルト。
$ yarn add eslint-config-prettier eslint-plugin-prettier
{ "extends": [ "react-app", "plugin:prettier/recommended" ] }
scripts: { "eslint": "eslint './src/**/*.{ts,tsx}'", "eslint:fix": "eslint --fix './src/**/*.{ts,tsx}'" }
あとはCIでtslint使ってる箇所を書き換えて終わり。
ブラクラ
const SignInPage: React.FC<Props> = props => { useEffect(() => { props.fetchUser(firebase.auth()); return () => undefined; }, []); ... };
というhooksをよく知らずに書いたコードで怒られたのでeslint --fix
したら
const SignInPage: React.FC<Props> = props => { useEffect(() => { props.fetchUser(firebase.auth()); return () => undefined; }, [props]); ... };
にされて、effectが無限に発火し続けてブラウザが固まるようになってしまった。
リリースしてから気づいたので焦って直した(fetchUser
をキャプチャするようにしたら直った)。
おわりに
create-react-app
使ってると最新のベストプラクティスが勝手に突っこまれるので便利。その反面アップデート時の対応は毎回少し面倒。