ESLint in Next.js and Create Next App #24900
Replies: 5 comments 20 replies
-
|
I don't believe the |
Beta Was this translation helpful? Give feedback.
-
|
Agreed. I'm aligned in principal to identifying common issues and problems, but using img hardly seems inherently problematic. The error would need to occur in a very specific set of scenarios where it would clearly be beneficial — otherwise it's just noise. |
Beta Was this translation helpful? Give feedback.
-
|
This is great feedback, thank you both 🙏 I think the main argument here is that I think in the majority of cases, using CC @atcastle in case he has some thoughts on this. |
Beta Was this translation helpful? Give feedback.
-
|
what about a rule to check the functions exported from within a page? I.e. only allow |
Beta Was this translation helpful? Give feedback.
-
|
That sounds like a great place to have a rule in place for (to display as a warning at least but potentially even as an error?). My only concern is that I wonder if this changes too frequently as new APIs get included and others become deprecated. 🤔 CC @rgabs |
Beta Was this translation helpful? Give feedback.
-
|
why are we considering an abandoned config :( |
Beta Was this translation helpful? Give feedback.
-
|
Interesting, this is something that shouldn't be happening... in the actual published
|
Beta Was this translation helpful? Give feedback.
-
|
We took over the package and it's currently on canary so it's entirely expected that npm is not displaying the contents of the package yet. https://www.npmjs.com/package/eslint-config-next/v/10.2.1-canary.5 is published correctly and has the latest code. Once we do a stable release the package will be showing the new contents. |
Beta Was this translation helpful? Give feedback.
-
|
Ah, I wasn't aware that it's possible that the current contents of canary releases may not be displayed on npm's website, interesting! 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
There's a lot to say about the npm website 😅 |
Beta Was this translation helpful? Give feedback.
-
|
In case it helps, I wrote full steps to try the feature out in #25008 :) |
Beta Was this translation helpful? Give feedback.
-
|
It would be great if |
Beta Was this translation helpful? Give feedback.
-
|
Ah yes good point! forgot about this. All the better reason to add this rule to the config then :) |
Beta Was this translation helpful? Give feedback.
-
|
This was the biggest bummer when we added |
Beta Was this translation helpful? Give feedback.
-
|
@JeffersonBledsoe recently opened #25770 to add some initial rules from @neefrehman Would you be okay with us including it in a phased approach as warnings before considering the recommended ruleset? |
Beta Was this translation helpful? Give feedback.
-
|
With regards to overriding certain rules to play nicely with @tubbo We now have a rule that warns you if |
Beta Was this translation helpful? Give feedback.
-
Yes I'm happy with a phased approach here.
In my case that is the only one I've had to modify |
Beta Was this translation helpful? Give feedback.
-
|
can we inform an unaware user if they install plugins seperately which were already installed using config-next? afaik underlying plugins from config-next are not shown in project package.json or eslint file so it's unclear for a user to know which plugins does it extend. |
Beta Was this translation helpful? Give feedback.
-
|
ESLint, and consequently I've also added a section to the docs that recommends adding the plugin directly instead of |
Beta Was this translation helpful? Give feedback.
-
|
It is not clear for me, if we use Thanks |
Beta Was this translation helpful? Give feedback.
-
|
@SalahAdDin No, |
Beta Was this translation helpful? Give feedback.
-
|
So, for getting also core web vitals |
Beta Was this translation helpful? Give feedback.
-
Over 50% of Next.js apps use ESLint in some part of their build workflow. This discussion covers steps taken to include a Next.js' specific plugin and shareable config and proposes a default setup for all new applications built with Create Next App.
tl.dr:
eslint-plugin-nextis an ESLint plugin that aims to catch common issues and problems in a Next.js application. There are a list of initial rules that this plugin will provide, but we would love to hear more suggestions.eslint-config-nextis a shareable config that bundles multiple useful plugins (next,react, andreact-hooks) and can easily be included in any Next.js application’s.eslintrcfile with({ "extends": "next"})next/core-web-vitals) to error on a few, important rules that will affect Core Web Vitalsnextandnext/core-web-vitalswill be included into the initial configPlugin
The following is an initial set of rules that
eslint-plugin-nextwill check for:Imports
next/documentshould not be imported outside ofpages/_document.js(ESLint Plugin: Prevent bad imports of next/document and next/head #24832)next/headshould not be imported inpages/_document.js(ESLint Plugin: Prevent bad imports of next/document and next/head #24832)Images
<img>. Use<Image>instead. (ESLint Plugin: Image rules #23402)Google Fonts
font-displayvalue is missing (orfallback/blockis used) for Google Fonts (ESLint Plugin: Google Font rules #24766)rel="preconnect"is missing for Google Fonts domain (ESLint Plugin: Google Font rules #24766)Polyfills
Links
<a>tag to navigate to a page. UseLinkfromnext/linkinstead (adding no html-link lint rule to eslint-plugin #12969)passHref=truemust be assigned when usingLinkwithout an HTML<a>element for a custom component (ESLint Plugin: passHref is not assigned #24670)Scripts
Styles
Head
<title>should not be used in<Head>in _document.js (ESLint Plugin: Disallow <title> in Head from next/document #24868)Shareable Config
New, experimental ESLint changes have been introduced to Next.js (still experimental/in canary). When
{ experimental: { eslint: true } }is now enabled innext.config.js:next build)..eslintrcfile for the first time and running a build will automatically populate the file to extend fromeslint-config-next(the new shareable config):This config extends recommended rule sets from
eslint-plugin-react,eslint-plugin-react-hooks, andeslint-plugin-next.Proposals
Although this discussion aims to start a conversation on how ESLint is currently configured within Next.js, it also proposes the following:
Create an additional ESLint config entry point (
next/core-web-vitals) that can be used by adding the following to.eslintrc:This would be stricter than the recommended rule-set (which is almost all warnings) and error on a few important rules:
<img>. Use<Image>instead.<a>tag to navigate to a page. UseLinkfromnext/linkinstead.If any of these rules error with ESLint enabled, the build will fail. As more rules get added to the plugin, only those that are guaranteed to negatively affect Core Web Vital metrics will be included into this entry point.
By default, ESLint will enabled in Create Next App with the following default
.eslintrcconfiguration:This will be set up to be easily opted-out of if need be and the default config can always be modified by the developer.
Thoughts? Suggestions? Please share!
Beta Was this translation helpful? Give feedback.
All reactions