この記事に書いてあること
create-react-appを使った、React×Typescriptの開発環境構築
create-react-appとは？
Reactの面倒な開発環境をコマンド一発で作成してくれる機能。
Reactを学習したり、新しいシングルページアプリケーションを作成するときに使います。
Node >= 14.0.0 及び npm >= 5.6 の環境が必要です
nodebrew list //nodeのバージョン確認
nodebrew use v16.14.0 //nodeのバージョン切り替え
各パッケージのバージョン
- React v17.0.2
- React-dom v17.0.2
- TypeScript v5.0.0
- husky v7.0.0
- lint-staged v12.3.7
- prettier v2.6.2
create-react-appする
下記コマンドで開発環境を構築
npx create-react-app app --template typescript
バージョン変えたい場合は適当なものへ変更しても可
npm i react@17.0.2 react-dom@17.0.2
下記コマンドで環境が立ち上がるので確認
npm run start
tsconfig.jsonを編集
TypeScriptによる型チェックの設定を編集します。
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noImplicitReturns": true,//追記 関数戻り値の型注釈を必須にする
"noUnusedLocals": true,//追記 使われていない変数を禁止する
"noUnusedParameters": true,//追記 使われていない引数を禁止する
"baseUrl": "src",//追記 モジュールのパスが絶対パス指定で場合、基準とするフォルダ
},
"include": [
"src"
]
}
コミット時のコード自動整形
下記を利用して、コミット時にコードの自動整形がかかるように設定する
- husky
- lint-staged
- prettier
まず必要なパッケージを以下のコマンドでインストール
npm i -D husky lint-staged prettier
.prettier.jsを作成する
.prettier.js
module.exports = {
printWidth: 120,
singleQuote: true,
semi: false,
}
下記コマンドを実行
※huskyの設定方法がv7から変更になったようです。
npx husky-init && npm install
処理が終わるとpackage.json に以下のような差分ができます。
package.json
{
"scripts": {
// ...
"prepare": "husky install" // 新しく追加
},
}
また.huskyというディレクトリが作成され、配下にpre-commitというファイルができているので、編集して、プレコミット時にlint-staged が実行されるように設定します。
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged //編集
次にpackage.jsonに新しくscriptを追記
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"fix": "npm run format && npm run lint:fix",//追記
"format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",//追記
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",//追記
"prepare": "husky install"
},
最後にlint-stagedの設定をして完了です。
package.json
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"npm run fix"
]
}