未定义“组件”（no-undef）

Question

刚刚将 vue 添加到现有项目中，但出现奇怪的 linting 错误：

error: 'components' is not defined (no-undef) at src/App.vue:13:3:
  11 | 
  12 | @Component({
> 13 |   components: { HelloWorld },
     |   ^
  14 | })
  15 | export default class App extends Vue {}
  16 | </script>

这也会发生在我添加对象的每个其他属性上。

Eslint 配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "@typescript-eslint/explicit-member-accessibility": ["error"],
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        mocha: true,
      },
    },
  ],
};

Package.json

    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",

打字稿

如果有任何问题，我正在使用打字稿。

Answer 1

打字稿-eslint 存储库中存在一个问题。

https://github.com/typescript-eslint/typescript-eslint/issues/2942

用yarn upgrade升级后问题消失了

Answer 2

我认为这是 TypeScript 的 no-undef 中的一个错误。我找不到任何关于它的信息，但这为我解决了这个问题。它认为“组件”是一个变量而不是属性名称。改用“组件”：

@Component({
    "components": { HelloWorld },
})
export default class App extends Vue {}