javascript - Eslint with Nuxt3 auto-import - Stack Overflow

admin管理员组

文章数量:1324426

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/remended, @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...

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/remended, @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...

• javascript
• vue.js
• nuxt.js
• eslint
• nuxt3.js

Share Follow asked Jul 31, 2023 at 12:57 FitzFishFitzFish 8,62933 gold badges3232 silver badges4343 bronze badges 3

• 1 You can use explicit imports to avoid this problem. Implicit identifiers (whether global or scoped) are historically a mon source of bugs — ESLint is trying to help you here. – jsejcksn Commented Sep 5, 2023 at 12:23
• 1 Maybe, but Nuxt encourages using auto-imports, so you'd expect there to be a remended solution. – Conley Owens Commented Dec 25, 2023 at 23:59
• 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. – Branislav Popadič Commented Jan 30, 2024 at 13:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8 +100

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

本文标签： javascriptEslint with Nuxt3 autoimportStack Overflow