cra-typescript-setup-reminder.md

CRA TypeScript

A quick reminder with the scripts and tools to create high quality React app with TypeScript

• npx create-react-app APP_NAME --template typescript --use-npm
• Add .idea/ .gitignore

Prettier

Install favorite shared prettier config

WebStorm: Preferences | Languages & Frameworks | JavaScript | Prettier

• Enable the option Run on save for files.
• Format files regex : {**/*,*}.{js,ts,jsx,tsx,md,mdx,json,html,css}

Eslint

• install favorite shared eslint config

WebStorm: Preferences | Languages & Frameworks | JavaScript | Eslint =>

• Automatic Eslint config
• Fix on save
• Format files regex : same as prettier above

Pre-commit

• npm i husky lint-staged
• In package.json scripts : "test:all": "react-scripts test --watchAll=false"
• Then in package.json root :

"husky": {
  "hooks": {
    "pre-commit": "lint-staged && npm run test:all"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write"
  ],
  "src/**/*.{js,jsx,ts,tsx,json}": [
    "eslint"
  ]
},

Storybook

• npx -p @storybook/cli sb init && npm run storybook

Analysing Bundle Size

• npm i source-map-explorer
• In package.json scripts: "analyze": "npm run build && source-map-explorer 'build/static/js/*.js'"
• To run analyze : npm run analyze