はじめに

りあクト！Firebaseで始めるサーバーレスReact開発を読んで、個人的に為になったTIPSを学習記録としてまとめます。

Typescriptの設定でコンパイル高速化

Typescriptの設定ファイルtsconfig.jsonにincrementalを有効にするオプションを記述すると再コンパイルの時間を短縮することができ、ホットリロードにかかる時間も短くなる

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src",
    "incremental": true //←追記
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules","build","scripts","functions"]
}

TypeScriptの型定義ファイル自動インストール

パッケージのtypesyncを使用すればpackage.jsonの中身を調べて、必要な型ファイルがなければ自動でdevDevpendenciesに追加してくれる。

$ npm install -g typesync
$ typesync

コミット時に自動でLintチェック

huskyとlint-stagedというパッケージを使うことで、コミット実行前にLintチェックすることができる。
huskyはgitに用意されているhooks機能と同様のタイミングに処理を登録することができ、コミット前だけでなくpush実行前など、ここに定義されているほとんどのhooksを使用できる。
lint-stagedはgitでステージングされたファイルのみにLintチェックすることができる。

設定はpackage.jsonに記述する。

  "scripts": {
    ︙
    ︙
    "precommit": "lint-staged"
  }
  ︙
  ︙
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ],
    "src/**/*.{css,jsx,tsx}": [
      "stylelint --fix",
      "git add"
    ],
    "functions/src/**/*.{js,ts}": [
      "cd functions/ && eslint --fix",
      "git add"
    ]
  },

参考

りあクト！Firebaseで始めるサーバーレスReact開発(https://booth.pm/ja/items/1572683)
https://typescript-jp.gitbook.io/deep-dive/intro-2/husky
https://qiita.com/khlizard/items/dfe1ec9d82c0ed5da7c6
https://github.com/typicode/husky/tree/master
https://kic-yuuki.hatenablog.com/entry/2019/05/27/090515
https://github.com/okonet/lint-staged
https://kray.jp/blog/expound-git-add/