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


```bash:version
node: 8.11.2
yarn: 1.7.0
```

```sh:create-react-app
npx create-react-app my-app
npx create-react-app my-app --scripts-version=react-scripts-ts
```

```bash:router
yarn add react-router-dom
```

```bash:styling
yarn add styled-components
```

```bash:components
yarn add @material-ui/core
```

```bash:flux
# redux
yarn add redux react-redux 
yarn add -D redux-devtools

# redux-zero
yarn add redux-zero
```

```bash:utilities
yarn add ramda lodash underscore
yarn add -D @types/ramda @types/lodash @types/underscore
```

```sh:test
yarn add -D jest jest-config ts-jest
```

```bash: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
```

```json:.vscode/settings.json
{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "tslint.run": "onSave"
}
```

[VS Code plugin for prettier/prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

```sh: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"]
}
```

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

```json:.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"
      }
    ]
  }
}
```

```json: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](https://reactjs.org/)
[Jest](https://facebook.github.io/jest/ja/)
[TypeScript](https://www.typescriptlang.org/index.html)
[TSLint](https://palantir.github.io/tslint/)
[ESLint](https://eslint.org/)
[Prettier](https://prettier.io/)
[TypeSearch](http://microsoft.github.io/TypeSearch/)
[TypeScript 日本語ハンドブック](http://js.studio-kingdom.com/typescript/)
[2018 年 React と Redux のエコシステム総まとめ](https://qiita.com/kotarella1110/items/e76bf9cca665157f3d2e)
[Prettier 入門 ～ESLintとの違いを理解して併用する～](https://qiita.com/soarflat/items/06377f3b96964964a65d)
[prettier + tslintを使ってみる](http://yuzu441.hateblo.jp/entry/2018/03/25/170606)
[ESLint(あるいはTSLint)とPrettierを併用する](http://tech-1natsu.hatenablog.com/entry/2018/01/07/154941)
[TypeScriptとjestでカバレッジを取る](http://progret.hatenadiary.com/entry/2017/03/10/064558)
[TypeScript の tslint.json を 調べる](https://azriton.github.io/2017/09/16/TypeScript%E3%81%AEtslint.json%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B/)

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