ESLint Configuration Issue

Per ESLint documentation (https://eslint.org/docs/user-guide/configuring), it is possible to either use a .eslintrc.json to define the configuration structure or create an eslintConfig property in your package.json file and define your configuration there.

If there are multiple configuration files in the same directory, ESLint will only use one. In the priority order, a .eslintrc.json is higher than a package.json and if those files are found in the same directory, a .eslintrc.json will take a priority and package.json file will not be used.

React-with-Redux project template contains a .eslintrc.json and package.json file in the same directory. This means that the following ESLint configuration setting in a package.json will not be used:

"eslintConfig": {
    "extends": "react-app"
  }

The above prioritizing behavior is probably worth to be mentioned in the article to prevent the user of React-with-Redux project template from concluding that configuration settings from both of the mentioned files complement each other.

I would also suggest moving the “extends”: “react-app” setting to .eslintrc.json file and add other settings for ESLint plugins included in package.json file (“eslint-plugin-react” and “eslint-plugin-jsx-a11y”), which would make .eslintrc.json file to look as follows:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "jsx-a11y"
  ],
  "extends": [
    "react-app",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ]
}

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 7264db1b-55ec-e419-d2c4-bd4fe64922a2
• Version Independent ID: 720995d2-006a-3573-4868-d253c8a2acc7
• Content: Use the React-with-Redux project template with ASP.NET Core
• Content Source: aspnetcore/client-side/spa/react-with-redux.md
• Product: aspnet-core
• Technology: aspnetcore-clientside
• GitHub Login: @SteveSandersonMS
• Microsoft Alias: scaddie

[volodymyr-karpenko]

@mkArtakMSFT I attach App.tsx and Layout.tsx files for reference. App_and_Layout.zip

[volodymyr-karpenko]

@mkArtakMSFT thanks for informing me.

In case you decide to add “plugin:react/recommended” setting to .eslintrc.json file, as I suggested, you will also have to change the content of App.tsx and Layout.tsx files in React-with-Redux project template. Otherwise, ESLint will signal the react/display-name rule violation.