Files
payloadcms/packages/eslint-config/configs/react/index.mjs
Alessio Gravili 1038e1c228 chore: move to eslint v9 (#7041)
- Upgrades eslint from v8 to v9
- Upgrades all other eslint packages. We will have to do a new
full-project lint, as new rules have been added
- Upgrades husky from v8 to v9
- Upgrades lint-staged from v14 to v15
- Moves the old .eslintrc.cjs file format to the new eslint.config.js
flat file format.

Previously, we were very specific regarding which rules are applied to
which files. Now that `extends` is no longer a thing, I have to use
deepMerge & imports instead.

This is rather uncommon and is not a documented pattern - e.g.
typescript-eslint docs want us to add the default typescript-eslint
rules to the top-level & then disable it in files using the
disable-typechecked config.

However, I hate this opt-out approach. The way I did it here adds a lot
of clarity as to which rules are applied to which files, and is pretty
easy to read. Much less black magic

## .eslintignore

These files are no longer supported (see
https://eslint.org/docs/latest/use/configure/migration-guide#ignoring-files).
I moved the entries to the ignores property in the eslint config. => one
less file in each package folder!
2024-07-09 09:50:37 -04:00

45 lines
1.2 KiB
JavaScript

import reactRules from './rules/react.mjs'
import reactA11yRules from './rules/react-a11y.mjs'
import jsxA11y from 'eslint-plugin-jsx-a11y'
import eslintPluginReactConfig from 'eslint-plugin-react/configs/recommended.js'
import eslintPluginReact from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import globals from 'globals';
import { fixupPluginRules } from '@eslint/compat'
import { deepMerge } from '../../deepMerge.js'
/** @type {import('eslint').Linter.FlatConfig} */
export const index = deepMerge(
{
rules: eslintPluginReact.configs.recommended.rules
},
{
rules: eslintPluginReactConfig.rules // Only take rules from the config, not plugins, as plugins there are on the old eslint v8 format => add react-hooks plugin myself below
},
reactRules,
reactA11yRules,
{
languageOptions: {
globals: {
...globals.browser,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
}
}
},
plugins: {
'jsx-a11y': jsxA11y,
react: fixupPluginRules(eslintPluginReact),
'react-hooks': reactHooks,
},
settings: {
react: {
version: 'detect',
},
},
}
)
export default index