Skip to content

Add ESLint flat config example, fix ESLint name #7246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 23, 2024
Merged

Add ESLint flat config example, fix ESLint name #7246

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c76fb3b
Add ESLint flat config example, fix ESLint name
karlhorky Oct 22, 2024
8eed4b7
Use official terminology
karlhorky Oct 22, 2024
426a8ab
Fix key
karlhorky Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 26 additions & 9 deletions src/content/learn/react-compiler.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ These docs are still a work in progress. More documentation is available in the
<YouWillLearn>

* Getting started with the compiler
* Installing the compiler and eslint plugin
* Installing the compiler and ESLint plugin
* Troubleshooting

</YouWillLearn>
Expand All @@ -26,7 +26,7 @@ The latest Beta release can be found with the `@beta` tag, and daily experimenta

React Compiler is a new compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.

The compiler also includes an [eslint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
The compiler also includes an [ESLint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.

The compiler is currently released as `beta`, and is available to try out on React 17+ apps and libraries. To install the Beta:

Expand Down Expand Up @@ -126,29 +126,46 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro

### Installing eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/}

React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.
React Compiler also powers an ESLint plugin. The ESLint plugin can be used **independently** of the compiler, meaning you can use the ESLint plugin even if you don't use the compiler.

<TerminalBlock>
npm install -D eslint-plugin-react-compiler@beta
</TerminalBlock>

Then, add it to your eslint config:
Then, add it to your ESLint config:

```js
import reactCompiler from 'eslint-plugin-react-compiler'

export default [
{
plugins: {
'eslint-plugin-react-compiler': reactCompiler,
},
rules: {
'react-compiler/react-compiler': 'error',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be:

'eslint-plugin-react-compiler/react-compiler': 'error'

If not, you will get the following error:

[Error] Request textDocument/diagnostic failed.
  Message: Request textDocument/diagnostic failed with message: Key "rules": Key "react-compiler/react-compiler": Could not find plugin "react-compiler".
  Code: -32603 
[Error] Document pull failed for text document file:///.../eslint.config.mjs
  Message: Request textDocument/diagnostic failed with message: Key "rules": Key "react-compiler/react-compiler": Could not find plugin "react-compiler".
  Code: -32603

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, that's not how it works - check other plugin docs:

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea @AnthonyLzq is right here

in flat config you can infer the plugin namespace in the plugins object ref here

in the example you shared the plugin namespace is react-x thats why rules are referred with react-x/

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry @AnthonyLzq @harish-sethuraman I see what you mean now

I fixed it the more conventional way, by using 'react-compiler' as a key in the plugins object:

},
},
]
```

Or, in the deprecated eslintrc config format:

```js
module.exports = {
plugins: [
'eslint-plugin-react-compiler',
],
rules: {
'react-compiler/react-compiler': "error",
'react-compiler/react-compiler': 'error',
Comment on lines -143 to +160
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made the quote style here consistent with the other quotes

},
}
```

The eslint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase.
The ESLint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase.

<Note>
**You don't have to fix all eslint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler.
**You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler.
</Note>

### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/}
Expand Down Expand Up @@ -333,11 +350,11 @@ React Compiler can verify many of the Rules of React statically, and will safely
[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.

### Something is not working after compilation {/*something-is-not-working-after-compilation*/}
If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all eslint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.
If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.

Due to the flexible and dynamic nature of JavaScript however, it's not possible to comprehensively detect all cases. Bugs and undefined behavior such as infinite loops may occur in those cases.

If your app doesn't work properly after compilation and you aren't seeing any eslint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component).
If your app doesn't work properly after compilation and you aren't seeing any ESLint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component).

```js {2}
function SuspiciousComponent() {
Expand Down
Loading