Create-React-App with TypeScript, Prettier, and ESLint

How I set-up a React web project from scratch.

Start with a new Create React App project that uses TypeScript:

yarn create react-app crats-app --typescript

cd crats-app

Add all the dev dependencies including my prettier config:

yarn add -D prettier @will-stone/prettier-config eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-simple-import-sort

Edit package.json:

{
"prettier": "@will-stone/prettier-config",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"typecheck": "tsc --noEmit --skipLibCheck",
"lint": "eslint --ignore-path .gitignore . --ext ts --ext tsx --ext js --ext jsx",
"lint:fix": "eslint --fix --ignore-path .gitignore . --ext ts --ext tsx --ext js --ext jsx"
},
"eslintConfig": {
"extends": [
"eslint:recommended",
"react-app",
"plugin:prettier/recommended"
],
"plugins": ["simple-import-sort"],
"rules": {
"prettier/prettier": "error",
"simple-import-sort/sort": "error"
}
}
}

Make sure the following settings are applied in VSCode:

{
"eslint.validate": [
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true },
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
],
"eslint.autoFixOnSave": true,
"eslint.options": {
"rules": {
"prettier/prettier": "warn" // Locally report Prettier formatting as warnings.
}
}
}

Run yarn lint:fix and set all eslint-disable-next-line no-console in the serviceWorker file.