環境
- 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