僕が開発しやすいReact環境を構築する。

環境

• React
• ESlint
• prettier
• TypeScript
• styled-components

手順

TypeScript用のReactプロジェクトを作成する

yarn create react-app my-app --typescript

src内にあるファイルをすべて削除する。

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

ESlintをインストールする

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

prettierをインストールする

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

基本設定

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",

    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser",
  "env": { "browser": true, "node": true, "es6": true },
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
    // 適当なルール
  }
}

VS CODE

setting.js

{
  // "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {"language": "typescript", "autoFix": true },
    {"language": "typescriptreact", "autoFix": true }
  ]
}

• editor.formatOnSave: trueは自動整形が衝突するので指定しないでください。
• eslint.validateでtypescriptを指定してください。
• reactを使用するのでtypescriptreactも指定します。

styled-componentsをインストールする

公式

yarn add styled-components
yarn add @types/styled-components

Material-UIをインストールする

公式

yarn add @material-ui/core

フォルダを構成する

Styled-componentsの作者の提案する構成にする。
この構成はページやコンポーネント固有のものと複数のコンポーネントから使用される共通コンポーネントに大きくディレクトリを分けるアプローチです。

src
├── App
│   ├── Header
│   │   ├── Logo.js    
│   │   ├── Title.js   
│   │   ├── Subtitle.js
│   │   └── index.js
│   └── Footer
│       ├── List.js
│       ├── ListItem.js
│       ├── Wrapper.js
│       └── index.js
├── shared
│   ├── Button.js
│   ├── Card.js
│   ├── InfiniteList.js
│   ├── EmojiPicker
│   └── Icons
└── index.js

参考

• VSCodeでESLint+@typescript-eslint+Prettierを導入する（v2.0.0）
• styled-componentsを使ったCSS設計