Next.js ESLint Config
Answered
Japanese cockle posted this in #help-forum
Japanese cockleOP
Curious as if to I'm the only one experiencing this - just noticed that I'm not getting any lint errors/warnings with the default Next.js ESLint config in VSCode/Cursor (tried both)
Running
Am I missing something here?
Running
pnpm run lint does return lint diagnostics, but the editor doesn't seem to reflect any of them. Interestingly enough, the same line of code does produce an in-editor diagnostic in a default Vite + React projectAm I missing something here?
Answered by Japanese cockle
Okay, I just had a crazy thought and confirmed that was indeed the issue
To your point, I never assumed there was anything wrong with the ESLint extension because I normally see errors in the 'Output' tab (e.g, prettier, Biome, etc) - I didn't see anything at all with this issue, however, I just found out that ESLint has a hidden 'Output' tab that I need to dig into and that's where I found out - it's crashing because of the
Not only that, found out this only happens with
To your point, I never assumed there was anything wrong with the ESLint extension because I normally see errors in the 'Output' tab (e.g, prettier, Biome, etc) - I didn't see anything at all with this issue, however, I just found out that ESLint has a hidden 'Output' tab that I need to dig into and that's where I found out - it's crashing because of the
next/core-web-vitals pluginNot only that, found out this only happens with
pnpm, it's a known issue and has been going for a while now 🫠 https://github.com/vercel/next.js/issues/7881312 Replies
Asian black bear
Have you installed the eslint extension in VSCode?
Japanese cockleOP
I have the ESLint extension, yes
@Japanese cockle I have the ESLint extension, yes
Chinese Alligator
Try restarting the extension?
Japanese cockleOP
I… Think I’m way past that point?
So as I mentioned, the ESLint in-editor diagnostics show up properly on a Vite project, and basically any other JS/TS project I have except the Next.js ones with base configuration
So as I mentioned, the ESLint in-editor diagnostics show up properly on a Vite project, and basically any other JS/TS project I have except the Next.js ones with base configuration
@Japanese cockle I… Think I’m way past that point?
So as I mentioned, the ESLint in-editor diagnostics show up properly on a Vite project, and basically any other JS/TS project I have except the Next.js ones with base configuration
Chinese Alligator
Sometimes restarting the extension works and it never hurts to try 🙂
Is your eslint config under the workspace root folder?
Is your eslint config under the workspace root folder?
Japanese cockleOP
It is, yes. The project I used to showcase was literally straight from
create-next-app@latest, no adjustmentsAlright, you up for an experiment? I think this will make things way easier
Steps to reproduce:
- Have either VSCode/Cursor with the ESLint extension
- Create a next app (select yes to everything)
- In app.tsx, create an unused variable
- Does the editor show an error?
- Does
Steps to reproduce:
- Have either VSCode/Cursor with the ESLint extension
- Create a next app (select yes to everything)
- In app.tsx, create an unused variable
- Does the editor show an error?
- Does
npm run lint throw an error?Chinese Alligator
Just to be sure,
my-app is the root folder and no folder is above it in the current workspace.Japanese cockleOP
Yes, 100% sure
@Japanese cockle Alright, you up for an experiment? I think this will make things way easier
Steps to reproduce:
- Have either VSCode/Cursor with the ESLint extension
- Create a next app (select yes to everything)
- In app.tsx, create an unused variable
- Does the editor show an error?
- Does `npm run lint` throw an error?
Chinese Alligator
Currently away from my computer, but my eslint errors were shown directly in the editor 🤔
Japanese cockleOP
Okay, I just had a crazy thought and confirmed that was indeed the issue
To your point, I never assumed there was anything wrong with the ESLint extension because I normally see errors in the 'Output' tab (e.g, prettier, Biome, etc) - I didn't see anything at all with this issue, however, I just found out that ESLint has a hidden 'Output' tab that I need to dig into and that's where I found out - it's crashing because of the
Not only that, found out this only happens with
To your point, I never assumed there was anything wrong with the ESLint extension because I normally see errors in the 'Output' tab (e.g, prettier, Biome, etc) - I didn't see anything at all with this issue, however, I just found out that ESLint has a hidden 'Output' tab that I need to dig into and that's where I found out - it's crashing because of the
next/core-web-vitals pluginNot only that, found out this only happens with
pnpm, it's a known issue and has been going for a while now 🫠 https://github.com/vercel/next.js/issues/78813Answer
Japanese cockleOP
I mainly use
pnpm, I assume you use another package manager, so that explains why you were seeing nothing wrong with linting on your end