Eslint + EditorConfig + Prettier configs - web

.editorconfig

# editorconfig.org
root = true

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

[Makefile]
indent_style = tab
tab_width = 4

[*.md]
trim_trailing_whitespace = false
indent_size = 4

[*.mk]
indent_style = tab
tab_width = 4

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "useJSXTextNode": true,
    "project": "tsconfig.json",
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier",
    "react-hooks",
    "simple-import-sort",
    "import"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "@typescript-eslint/no-non-null-assertion": 0,
    "jsx-quotes": [2, "prefer-double"],
    "no-console": 2,
    "comma-dangle": [
      2, {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "never"
      }
    ],
    "max-len": [
      2,
      {
        "code": 120,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }
    ],
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Packages. (Things that start with a letter (or digit or underscore), or `@` followed by a letter.)
          ["^@?\\w"],
          // Parent imports. Put `..` last.
          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
          // Other relative imports. Put same-folder imports and `.` last.
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          // Style imports.
          ["^.+\\.s?css$"],
          // Side effect imports. eg: import './style.css'
          ["^\\u0000"]
        ]
      }
    ],
    "sort-imports": "off",
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
    "@typescript-eslint/no-unused-vars": [
      2,
      {
        "args": "all",
        "argsIgnorePattern": "^_$",
        "varsIgnorePattern": "^_$"
      }
    ],
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "default",
        "format": ["camelCase"]
      },
      {
        "selector": "variable",
        "format": ["camelCase", "UPPER_CASE"]
      },
      {
        "selector": "variable",
        "types": ["function"],
        "format": ["PascalCase", "camelCase"]
      },
      {
        "selector": "parameter",
        "format": ["camelCase"],
        "leadingUnderscore": "allow"
      },
      {
        "selector": "property",
        "format": ["camelCase", "PascalCase", "snake_case"]
      },
      {
        "selector": "typeLike",
        "format": ["PascalCase"]
      },
      {
        "selector": "enumMember",
        "format": ["camelCase", "UPPER_CASE"]
      }
    ],
    "react/prop-types": 0,
    "react-hooks/rules-of-hooks": 0,
    "react-hooks/exhaustive-deps": 1,
    "react/display-name": 0,
    "react/no-unescaped-entities": 2,
    "prettier/prettier": [
      2,
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "semi": true,
        "printWidth": 120,
        "arrowParens": "always"

      }
    ]
  },
  "globals": {
    "module": true,
    "global": true,
    "window": true,
    "process": true,
    "Promise": true
  }
}

package.json

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.7.0",
    "@typescript-eslint/parser": "^4.7.0",
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-react": "^1.1.7",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-simple-import-sort": "^6.0.0",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "prettier": "^2.1.2",
  },
  "scripts": {
    "prettier": "prettier --write \"{./,./src/**}/*.{md,scss,json,yml}\",
    "lint": "eslint './src/**/*.{ts,tsx}'",
    "lint:fix": "eslint './src/**/*.{ts,tsx}' --fix --max-warnings 0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*": [
      "yarn prettier",
      "yarn lint:fix"
    ]
  },
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "es5",
      "es6",
      "es2017",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}