| 1 | # eslint-plugin-react-compiler |
| 2 | |
| 3 | ESLint plugin surfacing problematic React code found by the React compiler. |
| 4 | |
| 5 | ## Installation |
| 6 | |
| 7 | You'll first need to install [ESLint](https://eslint.org/): |
| 8 | |
| 9 | ```sh |
| 10 | npm i eslint --save-dev |
| 11 | ``` |
| 12 | |
| 13 | Next, install `eslint-plugin-react-compiler`: |
| 14 | |
| 15 | ```sh |
| 16 | npm install eslint-plugin-react-compiler --save-dev |
| 17 | ``` |
| 18 | |
| 19 | ## Usage |
| 20 | |
| 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.configs.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: |
| 39 | |
| 40 | ```json |
| 41 | { |
| 42 | "plugins": [ |
| 43 | "react-compiler" |
| 44 | ] |
| 45 | } |
| 46 | ``` |
| 47 | |
| 48 | |
| 49 | Then configure the rules you want to use under the rules section. |
| 50 | |
| 51 | ```json |
| 52 | { |
| 53 | "rules": { |
| 54 | "react-compiler/react-compiler": "error" |
| 55 | } |
| 56 | } |
| 57 | ``` |
| 58 | |
| 59 | ## Rules |
| 60 | |
| 61 | <!-- begin auto-generated rules list --> |
| 62 | TODO: Run eslint-doc-generator to generate the rules list. |
| 63 | <!-- end auto-generated rules list --> |