@lighttypes/eslint-config-react v1.0.2

eslint-config-react

• Installation
• Usage
• Examples
  • Basic
  • Basic + prettier
  • Basic + prettier + Jest

This ESLint configuration provided extends the plugin:react/recommended and plugin:react-hooks/recommended rulesets for recommended React linting rules. It also uses the jsx-a11y plugin for accessibility rules.

Installation

npm install --save-dev @lighttypes/eslint-config-react

Usage

In React project, you can apply rules from eslint-config-react.

.eslintrc.json:

{
  "extends": ["@lighttypes/eslint-config-react"]
}

Examples

Basic

It is recommended to use eslint-config-base, eslint-config-import packages together:

npm install --save-dev @lighttypes/eslint-config-base @lighttypes/eslint-config-import @lighttypes/eslint-config-react

.eslintrc.json:

{
  "root": true,
  "extends": [
    "@lighttypes/eslint-config-base",
    "@lighttypes/eslint-config-import",
    "@lighttypes/eslint-config-react"
  ],
  "ignorePatterns": ["coverage", "dist"],
  "settings": {
    "import/resolver": {
      "typescript": {
        "project": ["./tsconfig.json"]
      }
    }
  }
}

Basic + prettier

If you want to use eslint with formatting rules from prettier, you can exclude eslint rules that may conflict with prettier rules by using the eslint-config-prettier package:

npm install --save-dev eslint-config-prettier

.eslintrc.json:

{
  "root": true,
  "extends": [
    "@lighttypes/eslint-config-base",
    "@lighttypes/eslint-config-import",
    "@lighttypes/eslint-config-react",
    "prettier" // added
  ],
  "globals": {
    "React": "readonly"
  },
  "ignorePatterns": ["coverage", "dist"],
  "settings": {
    "import/resolver": {
      "typescript": {
        "project": ["./tsconfig.json"]
      }
    },
    "react": {
      "version": "18"
    }
  }
}

Basic + prettier + Jest

npm install --save-dev eslint-plugin-jest

.eslintrc.json:

{
  "root": true,
  "extends": [
    "@lighttypes/eslint-config",
    "@lighttypes/eslint-config-import",
    "@lighttypes/eslint-config-react",
    "prettier"
  ],
  "globals": {
    "React": "readonly"
  },
  "ignorePatterns": ["coverage", "dist"],
  "overrides": [
    {
      "env": {
        "jest/globals": true
      },
      "extends": ["plugin:jest/recommended"],
      "excludedFiles": ["**/test/playwright/**/?(*.)+(spec|test).[tj]s?(x)"],
      "files": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[tj]s?(x)"
      ],
      "plugins": ["jest"]
    }
  ],
  "rules": {
    "react/jsx-closing-bracket-location": [1, "line-aligned"],
    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
    "react/no-array-index-key": "off"
  },
  "settings": {
    "import/resolver": {
      "typescript": {
        "project": ["./tsconfig.json"]
      }
    },
    "react": {
      "version": "18"
    }
  }
}