ESLint, Prettier settings for in Typescript, React

Create the project

npx create-react-app app-name --template typescript

Install ESLint and Prettier

NPM

npm install --save-dev eslint-plugin-import eslint-plugin-jest eslint-plugin-json eslint-plugin-react @typescript-eslint/eslint-plugin prettier prettier-eslint eslint-config-prettier eslint-plugin-prettier

Yarn

yarn add -D eslint-plugin-import eslint-plugin-jest eslint-plugin-json eslint-plugin-react @typescript-eslint/eslint-plugin prettier prettier-eslint eslint-config-prettier eslint-plugin-prettier

Make the .eslintrc.js in your root folder, add this code.

module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:@typescript-eslint/eslint-recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
  ],
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  env: {
    browser: true,
    es6: true,
    jest: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      jsx: true, // Allows for the parsing of JSX
      arrowFunctions: true,
    },
  },
  plugins: ["react", "@typescript-eslint", "prettier"],
  settings: {
    react: {
      version: "detect", // Tells eslint-plugin-react to automatically detect the version of React to use
    },
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"],
        paths: ["./src"],
      },
    },
  },
  rules: {
    // Existing rules
    "comma-dangle": "off", // https://eslint.org/docs/rules/comma-dangle
    "function-paren-newline": "off", // https://eslint.org/docs/rules/function-paren-newline
    "global-require": "off", // https://eslint.org/docs/rules/global-require
    "import/no-dynamic-require": "off", // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md
    "no-inner-declarations": "off", // https://eslint.org/docs/rules/no-inner-declarations
    // New rules
    "class-methods-use-this": "off",
    "import/extensions": "off",
    "import/prefer-default-export": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-var-requires": "off",
  },
};

Create .prettierrc file on root and add this code

{
    "semi": true,
    "printWidth": 140,
    "tabWidth": 2,
    "singleQuote": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "useTabs": false,
    "arrowParens": "avoid",
    "jsxSingleQuote": true,
    "trailingComma": "all"
}

Create .prettierignore on root and add this code

**/node_modules
**/dist
**/package.json
**/yarn.lock
**/package-lock.json
**/.eslintrc.js
**/tsconfig.json

In package.json, add next code insede "scripts"

"lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
"lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"

For example,

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
    "lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
  },

and open the settings.json in VSCODE and add this code

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "editor.formatOnSave": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  "editor.rulers": [140],
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/build": true,
    "**/coverage": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.lintTask.enable": true,
  "eslint.packageManager": "yarn", // change to npm if you use npm
  "eslint.quiet": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "css.validate": false,
  "jest.enableInlineErrorMessages": true,
  "jest.showCoverageOnLoad": true,
  "jest.runAllTestsFirst": false,
  "prettier.jsxSingleQuote": true,
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}