私が歌川です

@utgwkk が書いている

create-react-app --template typesctiptの直後に初手で入れる設定

技術

はじめに

Reactでアプリケーションを作るときは、だいたい create-react-app --template typesctipt してから開発を始める。ゼロコンフィグでReactアプリケーションを書けて便利だけど、もうちょっと手を入れておくと快適に開発できるようになる。

趣味の個人開発で create-react-app --template typescript した直後にやっている設定を紹介する。集団開発だとまた変わってくる項目もありそう。

バージョン情報

  • create-react-app 4.0.3

設定していること

ESLint

package.jsonの eslintConfig を以下のように書き換える*1。

@typescript-eslint/explicit-module-boundary-types は、exportする関数の型を明示すべきというルール。型推論とエディタの補完でなんとかなっているので無効にしている。コードの規模や開発メンバーの人数によっては、明示したほうがスムーズにいく場合もあるかもしれない。

ほかにも有効にしておくとよいルールがあるかもしれないけど、今のところ手癖で回避できているので、あまり設定項目を増やしていない。

ESLintとprettierをくっつける動きもありそうだけど、やってない。VSCodeの設定でコードの見た目が勝手にフォーマットされるようにしている (後述) し、強制したいならhuskyとか導入したらいいと思う。

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "@typescript-eslint/explicit-module-boundary-types": "off"
    }
  },
2021/7/14 18:24 追記

create-react-app --template typesctiptの直後に初手で入れる設定 - 私が歌川です

あれ？「react-hooks/exhaustive-deps」は特に何もしなくてもデフォルトで有効になってない？（react-scripts、v4.0.3で確認

2021/07/14 18:10
b.hatena.ne.jp

手癖で足していたけど、改めて手元で確認してみると "plugins": ["react-hooks"] や rules の設定はなくてもデフォルトで有効になっていた。

ご指摘ありがとうございます。記事中でも明示的に設定しないように修正しました。id:Rishatang

prettier

インポート順のソートが自動で行われてほしいので、@trivago/prettier-plugin-sort-importsを導入する。

$ yarn add -D @trivago/prettier-plugin-sort-imports

package.jsonに prettier というキーで以下を追加する。

  "prettier": {
    "importOrder": [
      "^[./]"
    ],
    "importOrderSeparation": true
  },

このように設定することで、以下のようにインポートが分けてソートされる。

  • 依存ライブラリのインポート
  • 異なるディレクトリ以下のファイルのインポート
  • 同一ディレクトリ以下のファイルのインポート

.eslintignore, .prettierignore

自動生成したファイルをlintしなくてよいし、整形されたら困るので対象外にする。

.eslintignore と .prettierignore を以下の内容で保存する。relayが自動生成するファイルをignoreしている。

__generated__/

editorconfig

最終的にはprettierでフォーマットするけど、新規作成したファイルが4スペースインデントになったりしてイライラすることが多いので、前もってeditorconfigで制御しておく。

リポジトリルートに .editorconfig を以下の内容で設置している。

root = true

[*.{ts,tsx}]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

VSCodeの設定ファイル

.vscode/settings.json に以下の設定を書く。Format on Saveを有効にしているだけである。

{
    "[typescript]": {
        "editor.formatOnSave": true
    },
    "[typescriptreact]": {
        "editor.formatOnSave": true
    }
}

設定していないこと

husky, lint-stagedでのコミット時コード整形

huskyやlint-stagedを使うと、git commit のタイミングでstagedな差分を整形できるけど、やっていない。個人開発の範囲だと、VSCodeのFormat on SaveやAuto Fixで事足りている。

VSCodeの推奨拡張機能の設定

チームで開発するなら .vscode/extensions.json を設置してもよいかもしれない。editorconfig, ESLint, prettierを使うための拡張機能をおすすめする設定を書くなら以下のようになる。

{
    "recommendations": [
        "editorconfig.editorconfig",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
    ]
}

tsconfig.json の設定

create-react-app --template typescript で出力されたものをそのまま使っていて、特に困っていない。

おわりに

create-react-app --template typescript した直後に導入している設定を紹介してきた。

毎回初期化後に既存のリポジトリからコピペして設定しているけど、ひと通り設定済のものをcreate-react-appのテンプレートとしてアップロードしておけば、コピペしなくて済むようになって便利な気がする。

*1:ここから読み取れるように、package.jsonにどんどん書き足していく派である。設定項目が増えたらファイルを分けてもいいと思う。