create-react-appした後に入れるやつと諸々の設定ファイルたち

version

node: 8.11.2
yarn: 1.7.0

create-react-app

npx create-react-app my-app
npx create-react-app my-app --scripts-version=react-scripts-ts

router

yarn add react-router-dom

styling

yarn add styled-components

components

yarn add @material-ui/core

flux

# redux
yarn add redux react-redux 
yarn add -D redux-devtools

# redux-zero
yarn add redux-zero

utilities

yarn add ramda lodash underscore
yarn add -D @types/ramda @types/lodash @types/underscore

test

yarn add -D jest jest-config ts-jest

linter-formatter

# ES
yarn add -D \
  prettier \
  prettier-eslint \
  prettier-eslint-cli \
  babel-eslint \
  eslint \
  eslint-config-prettier \
  eslint-plugin-prettier \
  eslint-plugin-jest \ 
  husky \
  lint-staged

# TS
yarn add -D \
  prettier \
  tslint \
  tslint-plugin-prettier \
  tslint-config-prettier \
  husky \
  lint-staged

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "tslint.run": "onSave"
}

VS Code plugin for prettier/prettier

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["dom", "es2016", "es2017", "es2018", "esnext"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitUseStrict": true,
    "noUnusedLocals": true,
    "outDir": "build/dist",
    "rootDir": "src",
    "skipLibCheck": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "ESNext"
  },
  "exclude": ["node_modules", ".vscode"]
}

jest.config.js

module.exports = {
  moduleFileExtensions: ["ts", "tsx", "js"],
  transform: {
    "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  }
};

.eslintrc.json

{
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "es6": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parser": "babel-eslint",
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "es5"
      }
    ]
  }
}

tslint.json

{
  "rulesDirectory": ["tslint-plugin-prettier"],
  "extends": ["tslint-config-prettier"],
  "rules": {
    "adjacent-overload-signatures": true,
    "max-line-length": {
      "options": [120]
    },
    "no-arg": true,
    "no-bitwise": true,
    "no-conditional-assignment": true,
    "no-consecutive-blank-lines": false,
    "no-console": {
      "severity": "warning",
      "options": ["debug", "info", "log", "time", "timeEnd", "trace"]
    },
    "prettier": [
      true,
      {
        "semi": true
      }
    ]
  },
  "jsRules": {
    "max-line-length": {
      "options": [120]
    }
  },
  "linterOptions": {
    "exclude": ["config/**/*.js", "node_modules/**/*.ts"]
  }
}

React
Jest
TypeScript
TSLint
ESLint
Prettier
TypeSearch
TypeScript 日本語ハンドブック
2018 年 React と Redux のエコシステム総まとめ
Prettier 入門 ～ESLintとの違いを理解して併用する～
prettier + tslintを使ってみる
ESLint(あるいはTSLint)とPrettierを併用する
TypeScriptとjestでカバレッジを取る
TypeScript の tslint.json を 調べる

「...フロントエンドつら」