Next.js Discord

Discord Forum

ESLint Configuration Not Sticking

Answered
Russian Blue posted this in #help-forum
Open in Discord
Avatar
Russian BlueOP
Upon running npm run lint I receive the following message and confirm strict:

npm run lint

> volvox.apollo.web@1.3 lint
> next lint

? How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint
 â–² ESLint has successfully been configured. Run next lint again to view warnings and errors.


After running it again, it is the same loop over and over. It seems that the configuration isn't saving. How do I resolve this issue?
Answered by joulev
Create an .eslintrc.json file with this content
View full answer

53 Replies

Avatar
joulev
After running it do you see an eslint configuration file in your project?
Avatar
Russian BlueOP
Negative, nothing is created. Also tried with sudo.
Avatar
joulev
Uhh
:SheaWeird:
Avatar
joulev
Create an .eslintrc.json file with this content
Answer
Avatar
joulev
{
  "extends": "next/core-web-vitals"
}
Avatar
Russian BlueOP
In root correct?
Avatar
joulev
Yes in root
Avatar
Russian BlueOP
done
Avatar
joulev
And install eslint and eslint-plugin-next if you haven’t already
Avatar
Russian BlueOP
Lemme try lint now
Avatar
joulev
Wait no
Avatar
Russian BlueOP
Adding them now
Avatar
joulev
eslint and eslint-config-next
Avatar
Russian BlueOP
Done, is that it?
Avatar
joulev
Yes now try running lint again
Avatar
Russian BlueOP
Worked! Threw some errors on my project 🙂
@joulev Are there any other config settings?
Avatar
joulev
You can customise the eslint config however you want, but the file above is the most basic form shipped with create-next-app
For me it’s not strict enough though
Avatar
Russian BlueOP
Could you share yours? I'd prefer strict too
Avatar
joulev
I use vercel/style-guide for a stricter setup in my projects
Avatar
Russian BlueOP
Could you send that to me?
Avatar
joulev
Mine is https://github.com/joulev/website/blob/main/.eslintrc.js but it requires some extra dependencies, most notably https://github.com/vercel/style-guide
vercel/style-guide is incredibly strict, you most likely have to disable a few rules
But would rather disable rules from a strict preset than enable rules from a relaxed preset yeah
Avatar
Russian BlueOP
Going to use yours! Mind if I add you if I have questions on this since this topic is fixed? @joulev
Avatar
joulev
Sure
I’m no eslint expert either I only know to use other people’s preset but I’ll help if I can
Avatar
joulev
Sorry but I can’t take friend requests because my DM is reserved for my friend circles now. Feel free to ping me here or make a new forum post
Avatar
Russian BlueOP
Oh sure thing! I got your version working
Do you have any other suggestions for ESLint or editorconfig or even prettier? @joulev
Avatar
joulev
My repo linked above has all the personal choice I have for those kinds of things already
Avatar
Russian BlueOP
Sweet thank you!
@joulev Could you explain this regex from your prettier config? importOrder: ["^#/.*$", "^~/.*$", "^\\.\\.?/.*$"],
Avatar
joulev
https://github.com/trivago/prettier-plugin-sort-imports#importorder it’s this one
Avatar
Russian BlueOP
Also, should these be dev dependencies?

  "devDependencies": {
    "@vercel/style-guide": "^5.0.1",
    "eslint-config-prettier": "^9.0.0"
  }
Avatar
joulev
In a nextjs app then dependencies and devdependencies don’t have any differences, so I just put everything to dependencies
If you make a library though then yes move all prettier and eslint related stuff to devDeps
Avatar
Russian BlueOP
Perfect, this has been a massive help thank you so much!
Avatar
joulev
Np you’re welcome
Avatar
Russian BlueOP
@joulev I had to do some updates because of this error 
.eslintrc.js:
    Configuration for rule "@typescript-eslint/no-misused-promises" is invalid:
    Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed 'true')."


How come you don't get this error?
Avatar
Russian BlueOP
Newer version of the rules package maybe?
Avatar
joulev
Maybe you have "@typescript-eslint/no-misused-promises": true somewhere
Avatar
Russian BlueOP
Ah yes that’s exactly what I have. Thank you
Avatar
joulev
if you want to enable that rule use "error" or "warn", to disable use "off"
Avatar
Russian BlueOP
Yeah going to turn it off as it required me to change the entire config
And doesn’t seem like a great rule
Avatar
joulev
it's actually a great rule, i just already know my way with promises so don't want it to bite me unnecessarily
Avatar
Russian BlueOP
Oh then I’ll leave it on since I’m new to them
I already modified the configuration to fix it to 0,1,2 as well
Avatar
Russian BlueOP
@joulev This is what I ended up with for my ESLint config:

const { resolve } = require("node:path")

const project = resolve(__dirname, "tsconfig.json")

module.exports = {
    root: true,
    extends: [
        require.resolve("@vercel/style-guide/eslint/browser"),
        require.resolve("@vercel/style-guide/eslint/react"),
        require.resolve("@vercel/style-guide/eslint/next"),
        require.resolve("@vercel/style-guide/eslint/node"),
        require.resolve("@vercel/style-guide/eslint/typescript")
    ],
    parserOptions: { project },
    settings: { "import/resolver": { typescript: { project } } },
    rules: {
        "@typescript-eslint/explicit-function-return-type": 1,
        "@typescript-eslint/no-confusing-void-expression": "off",
        "@typescript-eslint/no-misused-promises": 2,
        "import/no-extraneous-dependencies": 2,
        "import/order": 2,
        "import/no-default-export": "off",
        "no-console": 1,
        "react/jsx-sort-props": 2,
        "react/no-array-index-key": "off"
    }
}


Any suggestions for other rules that a new front end developer (coming from backend) should use?
Avatar
joulev
I don’t know any rule suggestions, I only use vercel style guide and disable rules that the style guide uses that I find to be too strict