Skip to content

Commit 18eaf51

Browse files
authored
Support eslint 8+ flat plugin syntax out of the box for eslint-plugin-react-compiler (facebook#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 reactwg/react-compiler#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: ![Screenshot 2025-01-18 at 19 58 44](https://github.com/user-attachments/assets/ae0e4bea-fb96-4073-a5f7-c886d087b6af) Then used that in my app: ![Screenshot 2025-01-18 at 20 04 33](https://github.com/user-attachments/assets/21f77158-7535-453a-b988-49cf59d22d71) 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 ```
1 parent 829401d commit 18eaf51

File tree

2 files changed

+32
-1
lines changed

2 files changed

+32
-1
lines changed

compiler/packages/eslint-plugin-react-compiler/README.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,24 @@ npm install eslint-plugin-react-compiler --save-dev
1818

1919
## Usage
2020

21-
Add `react-compiler` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
21+
### Flat config
22+
23+
Edit your eslint 8+ config (for example `eslint.config.mjs`) with the recommended configuration:
24+
25+
```diff
26+
+ import reactCompiler from "eslint-plugin-react-compiler"
27+
import react from "eslint-plugin-react"
28+
29+
export default [
30+
// Your existing config
31+
{ ...pluginReact.configs.flat.recommended, settings: { react: { version: "detect" } } },
32+
+ reactCompiler.config.recommended
33+
]
34+
```
35+
36+
### Legacy config (`.eslintrc`)
37+
38+
Add `react-compiler` to the plugins section of your configuration file. You can omit the `eslint-plugin-` prefix:
2239

2340
```json
2441
{

compiler/packages/eslint-plugin-react-compiler/src/index.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,18 @@ module.exports = {
1111
rules: {
1212
'react-compiler': ReactCompilerRule,
1313
},
14+
configs: {
15+
recommended: {
16+
plugins: {
17+
'react-compiler': {
18+
rules: {
19+
'react-compiler': ReactCompilerRule,
20+
},
21+
},
22+
},
23+
rules: {
24+
'react-compiler/react-compiler': 'error',
25+
},
26+
},
27+
},
1428
};

0 commit comments

Comments
 (0)