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...

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.