mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
Support eslint 8+ flat plugin syntax out of the box for eslint-plugin-react-compiler (#32120)
## Summary The current docs for the react compiler eslint plugin is based on integrating with the old-style eslint config format. This is generally fine, but most plugins (and the [official docs](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file)) are now describing themselves in the new format. This PR has two changes: - Update the exports to include a "flat configuration" - Adds a README change describing how to handle both configs The solution is semi-based on @guillaumebrunerie's answer in https://github.com/reactwg/react-compiler/discussions/25 mixed with reading the source code for [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/src/index.ts) ## How did you test this change? I faked this API in the most recent deploy:  Then used that in my app:  and get myself some compiler messages: ``` /Users/orta/dev/app/apps/puzzmo.com/src/palette/HoverPopover.tsx 31:37 error Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) react-compiler/react-compiler /Users/orta/dev/app/apps/puzzmo.com/src/components/gameplay/PlayGamePauseOverlay.tsx 33:7 error Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) react-compiler/react-compiler 35:5 error Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) react-compiler/react-compiler ```
This commit is contained in:
@@ -18,7 +18,24 @@ npm install eslint-plugin-react-compiler --save-dev
|
||||
|
||||
## Usage
|
||||
|
||||
Add `react-compiler` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
|
||||
### Flat config
|
||||
|
||||
Edit your eslint 8+ config (for example `eslint.config.mjs`) with the recommended configuration:
|
||||
|
||||
```diff
|
||||
+ import reactCompiler from "eslint-plugin-react-compiler"
|
||||
import react from "eslint-plugin-react"
|
||||
|
||||
export default [
|
||||
// Your existing config
|
||||
{ ...pluginReact.configs.flat.recommended, settings: { react: { version: "detect" } } },
|
||||
+ reactCompiler.config.recommended
|
||||
]
|
||||
```
|
||||
|
||||
### Legacy config (`.eslintrc`)
|
||||
|
||||
Add `react-compiler` to the plugins section of your configuration file. You can omit the `eslint-plugin-` prefix:
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
@@ -11,4 +11,18 @@ module.exports = {
|
||||
rules: {
|
||||
'react-compiler': ReactCompilerRule,
|
||||
},
|
||||
configs: {
|
||||
recommended: {
|
||||
plugins: {
|
||||
'react-compiler': {
|
||||
rules: {
|
||||
'react-compiler': ReactCompilerRule,
|
||||
},
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'react-compiler/react-compiler': 'error',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user