SPA開発時の環境構築

SPAプロジェクトの立ち上げ時にやっていること

create-react-app w/ TypeScript

create-react-appのTypeScript版ボイラープレートをセットアップする

$ npm install -g create-react-app
$ cd project_dir
$ create-react-app . --scripts-version=react-scripts-ts

TSLintの設定変更

別記事にまとめた

nomusiclife.hatenablog.jp

コミット前にTSLint(と、Prettier)

okonet/lint-staged: 🚫💩 — Run linters on git staged files

• コミット前のファイルにTSLintを適用し、自動修正が可能なものは修正してそのままコミット、修正が不可能ならコミットを中止する
• ついでにjsonやmdにPrettierを適用する

$ yarn add -D lint-staged husky prettier

package.json

  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,json,md}": [
      "prettier --write",
      "git add"
    ],
    "*.{ts,tsx}": [
      "tslint --fix",
      "git add"
    ]
  },

ts(x)やmdをコミットすると以下のようにタスクが実行され、ファイルがコミットされる