Add ESLint flat config example, fix ESLint name #7246
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
| 'react-compiler/react-compiler': "error", | ||
| 'react-compiler/react-compiler': 'error', |
There was a problem hiding this comment.
I made the quote style here consistent with the other quotes
| 'eslint-plugin-react-compiler': reactCompiler, | ||
| }, | ||
| rules: { | ||
| 'react-compiler/react-compiler': 'error', |
There was a problem hiding this comment.
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: -32603There was a problem hiding this comment.
No, that's not how it works - check other plugin docs:
There was a problem hiding this comment.
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/
There was a problem hiding this comment.
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:
|
Sweet, thanks! |
| import reactCompiler from 'eslint-plugin-react-compiler' | ||
|
|
||
| export default [ | ||
| { | ||
| plugins: { | ||
| 'react-compiler': reactCompiler, | ||
| }, | ||
| rules: { | ||
| 'react-compiler/react-compiler': 'error', | ||
| }, | ||
| }, | ||
| ] |
There was a problem hiding this comment.
in case this would be an accepted change, I actually tend to prefer:
- a separate
configsvariable (instead of an anonymous export) - usage of the ESLint
Linter.Config[]TS type with a JSDoc annotation
| import reactCompiler from 'eslint-plugin-react-compiler' | |
| export default [ | |
| { | |
| plugins: { | |
| 'react-compiler': reactCompiler, | |
| }, | |
| rules: { | |
| 'react-compiler/react-compiler': 'error', | |
| }, | |
| }, | |
| ] | |
| import reactCompiler from 'eslint-plugin-react-compiler' | |
| /** @type {import('eslint').Linter.Config[]} */ | |
| const configs = [ | |
| { | |
| plugins: { | |
| 'react-compiler': reactCompiler, | |
| }, | |
| rules: { | |
| 'react-compiler/react-compiler': 'error', | |
| }, | |
| }, | |
| ] | |
| export default configs |
There was a problem hiding this comment.
@poteto @harish-sethuraman oh lol too slow (thanks for the merge!)
in case this is a desirable change, I can open a separate PR
There was a problem hiding this comment.
I'd prefer leaving it off since this is more about personal preference. We just want the minimal config in the docs.
5 participants
ESLint v8 is end-of-life and ESLint v9 uses flat config by default, so starting with this as a first example seems like the right option (https://x.com/karlhorky/status/1848758371127583015)
Also, fixed the ESLint brand name typos
cc @poteto