Create React app Typescript with eslint

.editorconfig

# Editor configuration, see http://editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

.eslintignore

node_modules/
public/
build/

*.css
*.svg

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/prettier",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "react-hooks"],
  "rules": {
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "react/jsx-filename-extension": [
      "warn",
      {
        "extensions": [".tsx"]
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["error"],
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 180
      }
    ],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/function-component-definition": [
      "error",
      { "namedComponents": "arrow-function" }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

.prettierignore

package.json
package-lock.json
public
node_modules
build
coverage

.prettierrc

{
  "endOfLine": "lf",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

.vscode_extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "eamodio.gitlens",
    "Orta.vscode-jest",
    "bradlc.vscode-tailwindcss",
    "heybourn.headwind",
    "Zignd.html-css-class-completion"
  ]
}

.vscode_settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "typescript.tsdk": "node_modules\\typescript\\lib",
  "files.autoSave": "afterDelay",
  "search.exclude": {
    "**/node_modules": true,
    "**/.vscode": true,
    "**/build": true
  },
  "git.autofetch": true,
  "javascript.format.enable": false,
  "typescript.implementationsCodeLens.enabled": true,
  "editor.trimAutoWhitespace": true,
  "files.encoding": "utf8",
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[javascriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "css.validate": false,
  "editor.quickSuggestions": {
    "strings": true
  }
}

README.md

Create project

npx create-react-app your-app --template typescript --use-npm

cd your-app

Setup prettier

curl -o .prettierrc https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.prettierrc

curl -o .prettierignore https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.prettierignore

Configure vscode

mkdir .vscode
curl -o .vscode/extensions.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.vscode_extensions.json
curl -o .vscode/settings.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.vscode_settings.json

curl -o .editorconfig https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.editorconfig

Install and init eslint

npx install-peerdeps --dev eslint-config-react-app
npm install eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
npm install eslint-config-airbnb-typescript --save-dev
npx install-peerdeps --dev eslint-plugin-prettier
npm install eslint-config-prettier --save-dev
npm install @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom react-scripts typescript@4.0.5 @babel/core --save-dev

Add the Rules for prettier to the .eslintrc.json

curl -o .eslintrc.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.eslintrc.json

curl -o .eslintignore https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.eslintignore

Configure lint with husky

npm install --save-dev husky

Add to you package.json

  "husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "pre-push": "npm run lint"
    }
  }

Add to your script in package.json

"scripts": {
  ...
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  ...
}

Then enjoy to fix the errors in the base react typescript template

For reportWebVitals.ts I use at the /* eslint-disable */ top or just remove it rm src/reportWebVitals.ts

I also move all the dependecies except react, react-dom and web-vitals @testing-library/jest-dom to the devDependencies

Don't forget to restart your vscode and do npm install after all setup

FAST.md

npx create-react-app your-app --template typescript --use-npm
cd your-app

curl -o .prettierrc https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.prettierrc
curl -o .prettierignore https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.prettierignore
mkdir .vscode
curl -o .vscode/extensions.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.vscode_extensions.json
curl -o .vscode/settings.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.vscode_settings.json
curl -o .editorconfig https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.editorconfig
curl -o .eslintrc.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.eslintrc.json
curl -o .eslintignore https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.eslintignore
npx install-peerdeps --dev eslint-config-react-app
npm install eslint-plugin-react-hooks@latest @typescript-eslint/eslint-plugin@^4.4.1 @typescript-eslint/parser@4.0.0 --save-dev
npm install eslint-config-airbnb-typescript --save-dev
npx install-peerdeps --dev eslint-plugin-prettier
npm install eslint-config-prettier --save-dev
npm install @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom react-scripts typescript@4.0.5 @babel/core --save-dev
npm install husky --save-dev
npx json -I -f package.json -e 'this.husky={"hooks":{"pre-commit": "npm run lint","pre-push": "npm run lint"}}'
npx json -I -f package.json -e 'this.scripts={...this.scripts , "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }'
echo '/* eslint-disable */' | cat - src/reportWebVitals.ts > temp && mv temp src/reportWebVitals.ts
npx json -I -f tsconfig.json -e 'this.compilerOptions.jsx="react"'
echo '\n.eslintcache' >> .gitignore

MANUAL.md

npm init private npm install react typescript @types/react --save-dev

npm install eslint --save-dev npx eslint --init

How would you like to use ESLint?
Select: To check syntax, find problems, and enforce code style
What type of modules does your project use?
Select: JavaScript modules (import/export)
Which framework does your project use?
Select: React
Does your project use TypeScript?
Select: Yes
Where does your code run?
Select: Browser
How would you like to define a style for your project?
Select: Use a popular style guide
Which style guide do you want to follow?
Select: Airbnb: https://github.com/airbnb/javascript
What format do you want your config file to be in?
Select: JSON

npm install --save-dev --save-exact prettier npm install --save-dev eslint-config-prettier npm install --save-dev eslint-plugin-prettier npm install eslint-import-resolver-typescript --save-dev

npm install husky --save-dev npx json -I -f package.json -e 'this.husky={"hooks":{"pre-commit": "npm run lint","pre-push": "npm run lint"}}' npx json -I -f package.json -e 'this.scripts={...this.scripts , "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }'

curl -o .prettierrc https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.prettierrc curl -o .prettierignore https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.prettierignore

mkdir .vscode curl -o .vscode/extensions.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.vscode_extensions.json curl -o .vscode/settings.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.vscode_settings.json

curl -o .eslintrc.json https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.eslintrc.json curl -o .eslintignore https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.eslintignore