はじめに
りあクト!Firebaseで始めるサーバーレスReact開発を読んで、個人的に為になったTIPSを学習記録としてまとめます。
Typescriptの設定でコンパイル高速化
Typescriptの設定ファイルtsconfig.jsonにincrementalを有効にするオプションを記述すると再コンパイルの時間を短縮することができ、ホットリロードにかかる時間も短くなる
{
"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/