リモートワークを便利にするWebアプリRee⑩ ~create-react-appのカスタマイズ~

ReeではCreate React Appを使ってプロジェクト構築をしています。

Webpackの設定なんかをいじりたくなったときのカスタマイズ方法を見ていきましょう。

 

カスタマイズするためのコマンド

まずは以下のコマンドを打ちます。これを打つとwebpack.config.jsなどがプロジェクトフォルダ内に作られます。使用しているライブラリがpackage.jsonにも追加されます。

注意点としては、これをやると後戻りできません。今後はライブラリも自己管理になります。

 

ESLint

$ npm run ejectで諸々設定をカスタムすることが出来るようになったのでESLintをwebpackで使ってみましょう。

ESLintにはStandard Code Styleを取り入れます。Create React Appのデフォルトでは簡単なコードチェックだけです。

そして、.eslintrc.jsonを作成し以下を記述します。

これでStandard Code Styleのコードチェックをしてくれます。エラーがあれば教えてくれるようになりました。

また、セミコロンの有無など簡単な修正は自動でやってくれる記述があります。webpack.config.dev.jsの118行目あたりにfix: trueを追加する事でできます。