ESLint config for JS, Astro, and React

eslint.config.js

import globals from 'globals'
import pluginJs from '@eslint/js'
import stylistic from '@stylistic/eslint-plugin'
import pluginReact from 'eslint-plugin-react'
import pluginAstro from 'eslint-plugin-astro'

export default [
  // Configure directories to ignore
  {
    ignores: ['dist', 'public'],
  },
  // Configure globals
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  // Configure JS flat plugin
  pluginJs.configs.recommended,
  // Configure Styleistic flat plugin
  // Must disable jsx rules to not conflict with astro files
  stylistic.configs.customize({
    jsx: false,
  }),
  // Configure React flat plugin
  // Must scope it to jsx and tsx files to not conflict with astro files
  {
    files: ['**/*.{jsx,tsx}'],
    plugins: pluginReact.configs.flat.recommended.plugins,
    languageOptions: pluginReact.configs.flat.recommended.languageOptions,
    rules: {
      ...pluginReact.configs.flat.recommended.rules,
      ...pluginReact.configs.flat['jsx-runtime'].rules,
      'react/prop-types': 0,
    },
  },
  // Configure Astro legacy (hence ...) plugin
  ...pluginAstro.configs.recommended,
]