ESLint：已定义的全局扩展仍未定义（no-undef）

Question

我有一个全局扩展，它定义了一个名为“is”的方法。我遇到的问题是 ESLink 将其标记为“no-undef”；尽管它在运行时可用。
禁用该规则对我来说不是一个选择。我宁愿定义它以便 ESLint 可以看到它。

我的项目使用 NodeJS、Vue、TypeScript、Babel 和 WebPack。这并不重要，但 typescript JavaScript 版本设置为esnext。

以下是我要求您牢记的目标：

1. 除了这个 ESLint 错误之外，没有其他编译或运行时错误
2. 如果我使用它在每个文件的顶部声明我的方法，一切都会正常工作
3. 我希望有一个集中的、简单的方法来为 ESLint 定义它
4. 我没有使用类型定义文件（AKA d.ts），因为你不能这样定义它

// This is my 'is.ts' file; THIS IS NOT THE SAME AS A d.ts FILE
...
function is() { ... }
declare global {
  function is(): boolean { ... }
}

// physically define on window giving my method global scope
const _LocalWindow: any = window;
_LocalWindow.is = _LocalWindow.is || is;

我的应用程序中的其他地方

declare function is(): boolean; // <== ONLY WAY TO PREVENT ESLINT ERROR 'no-undef'

if (is()) { // <== I DON'T WANT TO USE 'window.is'
  ...
}

作为参考，下面是我的package.json和jsconfig.json配置文件

// package.json
{
  "name": "vuedatagriddemo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.5",
    "vuetify": "^2.2.17",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.18.0",
    "@typescript-eslint/parser": "^2.18.0",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/eslint-config-typescript": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-vue": "^6.1.2",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.11"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

我也无法让https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals在我的 TypeScript 项目中工作，然后在遇到推荐的解决方案后将其禁用：

我们强烈建议您不要在 TypeScript 项目上使用 no-undef lint 规则。它提供的检查已经由 TypeScript 提供，无需配置 - TypeScript 只是在这方面做得更好。

来源： https: //github.com/typescript-eslint/typescript-eslint/blob/main/docs/linting/TROUBLESHOOTING.md#i-get-errors-from-the-no-undef-rule-about-global-即使没有打字稿错误，变量也未定义

Answer 2

就像 @Leo 指出的那样，您可以按照 eslint FAQ 的建议简单地删除 eslint 文件中的 no-undef

-> eslintrc.js 或 eslintrc.json

{
  ... your configs
  overrides: [
        {
            files: ["*.ts"],
            rules: {
                "no-undef": "off"
            }
        }
    ]
}

Answer 3

.eslintrc

{
  "rules": [
    ...,
    "react/jsx-no-undef": [2, { "typeof": true }],
    "no-undef": [2, { "typeof": true }],
    ...
  ]
}