Eslint with Nuxt3 auto-import

Question

Seems very basic but I can't find anywhere an eslint setup that works with Nuxt3 auto-import, to avoid no-undef errors. I'm not using typescript.

I tried the following packages: @antfu/eslint-config, plugin:nuxt/recommended, @nuxt/eslint-config, @nuxtjs/eslint-config, @nuxt/eslint-config-typescript, with no luck so far.

The only thing that works for now is setting each reference in .eslintrc globals...

Bousquet

You can use explicit imports to avoid this problem. Implicit identifiers (whether global or scoped) are historically a common source of bugs — ESLint is trying to help you here. – Doornail

Maybe, but Nuxt encourages using auto-imports, so you'd expect there to be a recommended solution. – Lenette

There is now an experimental cli tool that works pretty well, I tried it on Nuxt3 and Vue project as well. It will install required packages, update you eslint config and even .vscode settings, if that is what you're into. Simply run npx @antfu/eslint-config@latest. Read more on antfu/eslint-config. – Taal

Answer 1

I only use the following packages:

"@antfu/eslint-config": "^0.42.0"
"eslint": "^8.49.0"

and in VSCode, I have installed extensions:

dbaeumer.vscode-eslint
vue.volar

and my .eslintrc.js:

module.exports = {
  extends: [
    '@antfu',
  ],
};

and my .vscode/settings.json:

{
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.options": {
        "extensions": [
          ".js",
          ".vue"
        ]
    },
}

This should accomplish what you're looking for.

NOTE: You do have to - whether you are using Typescript or not - run nuxt dev at least once to have Nuxt generate types internally inside .nuxt for auto-imports to work and allow Volar + ESLint to function properly.

Also, ensure that Volar is running in Takeover mode.

Methylamine

savior!! works with the @antfu you linked, not with the (not that) older one I was using, thanks. – Bousquet