Eslint 与 Nuxt3 自动导入

Question

看起来很基本，但我在任何地方都找不到与 Nuxt3 auto-import一起使用的 eslint 设置，以避免no-undef错误。我没有使用打字稿。

我尝试了以下软件包：@antfu/eslint-config、plugin:nuxt/recommended、@nuxt/eslint-config、@nuxtjs/eslint-config、@nuxt/eslint-config-typescript，到目前为止没有运气。

现在唯一有效的是在 .eslintrc 中设置每个引用globals...

Answer 1

我只使用以下包：

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

在 VSCode 中，我安装了扩展：

dbaeumer.vscode-eslint
vue.volar

和我的 .eslintrc.js：

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

和我的 .vscode/settings.json：

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

这应该可以实现您正在寻找的内容。

注意：无论您是否使用 Typescript，您都必须nuxt dev至少运行一次，让 Nuxt 在内部生成类型.nuxt，以便自动导入工作并允许 Volar + ESLint 正常运行。

另外，请确保 Volar 正在接管模式下运行。