Document how to add eslint-plugin-react

[JanMisker]

It would be awesome if someone can share how they added eslint-plugin-react together with this plugin.

[cyrus01337]

I've setup a minimal project with what little knowledge I have of ESLint 9 here, drawing from the configuration provided from facebook/react#28313, specifically from this comment.

While the project provides linting for React components and <script> tags in Astro files, there's a perceived bug where no linting occurs for React components used within Astro files if a <script> tag is present. If anyone could assist with, that would be most helpful as I'm unsure if this is a configuration error on my part, or a potential bug in the plugin itself.

[smnbbrv]

This is actually how I managed to do it so far. Still testing, but seems to be quite working.

The only thing that doesn't yet was fixable with https://github.com/ota-meshi/eslint-plugin-astro/issues/132 however can't get it working with v9

import pluginJs from '@eslint/js';
// import tsParser from '@typescript-eslint/parser';
import eslintPluginAstro from 'eslint-plugin-astro';
import importPlugin from 'eslint-plugin-import';
import prettierRecommended from 'eslint-plugin-prettier/recommended';
import reactPlugin from 'eslint-plugin-react';
import hooksPlugin from 'eslint-plugin-react-hooks';
import tseslint from 'typescript-eslint';

export default [
  // global ignores
  { ignores: ['dist/*', 'node_modules/*'] },

  // standard js rules
  pluginJs.configs.recommended,

  // standard typescript rules
  ...tseslint.configs.recommended,

  // override typescript rules
  {
    rules: {
      '@typescript-eslint/explicit-function-return-type': 0,
      '@typescript-eslint/explicit-module-boundary-types': 0,
      '@typescript-eslint/no-empty-function': 0,
      '@typescript-eslint/no-unused-expressions': 0,
      '@typescript-eslint/no-empty-interface': 0,
      '@typescript-eslint/no-explicit-any': 0,
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          varsIgnorePattern: '^_',
          argsIgnorePattern: '^_',
          caughtErrorsIgnorePattern: '^_',
        },
      ],
    },
  },

  // astro rules
  ...eslintPluginAstro.configs.recommended,

  // react rules
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    settings: {
      react: {
        version: 'detect',
      },
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    ...reactPlugin.configs.flat.recommended,
  },

  // react hooks
  {
    plugins: {
      'react-hooks': hooksPlugin,
    },
    rules: {
      ...hooksPlugin.configs.recommended.rules,
    },
  },

  // override react rules
  {
    rules: {
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'off',
    },
  },

  // prettier rules
  prettierRecommended,

  // TODO doesnt work yet
  // define the configuration for `<script>` tag.
  // script in `<script>` is assigned a virtual file name with the `.js` extension.
  // {
  //   files: ['**/*.astro/*.js', '*.astro/*.js'],
  //   parser: tsParser,
  //   rules: {
  //     'prettier/prettier': 'off',
  //   },
  // },

  // import rules
  {
    ...importPlugin.flatConfigs.recommended,
    rules: {
      'import/order': [
        'error',
        {
          groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
          alphabetize: {
            order: 'asc',
          },
        },
      ],
    },
  },
];

[drwpow-figma]

I’m able to run this plugin in ESLint 9.x without eslint-plugin-react. But when using reactPlugin.configs.flat.recommended, I get this error:

Oops! Something went wrong! :(

ESLint: 9.14.0

Error: The prop must be a JSXAttribute collected by the AST parser.
Occurred while linting /src/components/hero.astro:20
Rule: "react/jsx-key"
    at propName (/node_modules/.pnpm/jsx-ast-utils@3.3.5/node_modules/jsx-ast-utils/lib/propName.js:14:11)
    at /node_modules/.pnpm/jsx-ast-utils@3.3.5/node_modules/jsx-ast-utils/lib/hasProp.js:38:67
    at Array.some (<anonymous>)
    at hasProp (/node_modules/.pnpm/jsx-ast-utils@3.3.5/node_modules/jsx-ast-utils/lib/hasProp.js:32:16)
    at checkIteratorElement (/node_modules/.pnpm/eslint-plugin-react@7.37.2_eslint@9.14.0/node_modules/eslint-plugin-react/lib/rules/jsx-key.js:92:14)
    at checkArrowFunctionWithJSX (/node_modules/.pnpm/eslint-plugin-react@7.37.2_eslint@9.14.0/node_modules/eslint-plugin-react/lib/rules/jsx-key.js:164:9)
    at CallExpression[callee.type="MemberExpression"][callee.property.name="map"],       CallExpression[callee.type="OptionalMemberExpression"][callee.property.name="map"],       OptionalCallExpression[callee.type="MemberExpression"][callee.property.name="map"],       OptionalCallExpression[callee.type="OptionalMemberExpression"][callee.property.name="map"] (/node_modules/.pnpm/eslint-plugin-react@7.37.2_eslint@9.14.0/node_modules/eslint-plugin-react/lib/rules/jsx-key.js:281:9)
    at ruleErrorHandler (/node_modules/.pnpm/eslint@9.14.0/node_modules/eslint/lib/linter/linter.js:1084:48)
    at /node_modules/.pnpm/eslint@9.14.0/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)