TypeScript ESLint 错误地报告：“函数已定义但从未使用。”答案

【问题标题】：TypeScript ESLint incorrectly reports: "Function is defined but never used."TypeScript ESLint 错误地报告：“函数已定义但从未使用。”
【发布时间】：2020-09-13 11:55:40
【问题描述】：

我在lib\iw-browser.ts 文件中有iwAddClassAndRemoveInSiblings 函数：

"use strict";

/* Adds given CSS class to given element and remove this class in element's siblings.
   Equal to jQuery: $(element1).addClass(CSSClass).siblings().removeClass(CSSClass) */
function iwAddClassAndRemoveInSiblings(element: Element, CSSClass: string): void {
  for (const sibling of element.parentNode.children)
    sibling.classList.remove(CSSClass)
  element.classList.add(CSSClass)
}

我在lib\iw-carousel\iw-carousel.ts文件中调用了这个函数：

document.addEventListener('click', (event) => {
  const target = <HTMLElement>event.target
  if (target.matches('.iw-carousel__indicators li'))
    iwCarouselShowSlide(target.closest('.iw-carousel'), Number(target.dataset.slideTo))
})

/* Shows i-th slide of the given iw-carousel. */
const iwCarouselShowSlide = (carousel: HTMLElement, slideIndex: number) => {
  const slides = carousel.querySelectorAll('.iw-carousel__item')
  iwAddClassAndRemoveInSiblings(slides[slideIndex], 'active')
}

编译后的iw-browser.js和iw-carousel.js在iw-carousel.html中引用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <script src="lib/iw-carousel/iw-carousel.js"></script>
  <script src="lib/iw-browser.js"></script>
</head>
<body>
   <!-- unimportant html content -->
</body>
</html>

不幸的是，Typescript ESLint 错误地将 iwAddClassAndRemoveInSiblings 函数报告为未使用，无论是在 Visual Studio Code 中，还是从命令行运行 npx eslint . --ext .ts：

'iwAddClassAndRemoveInSiblings' is defined but never used. eslint(@typescript-eslint/no-unused-vars)

HTML 页面显示正确 - 它运行 iwAddClassAndRemoveInSiblings 函数没有问题。 Visual Studio Code 也知道使用了iwAddClassAndRemoveInSiblings 函数。如果我尝试使用不存在的函数，VSC 会说：找不到名称“nonExsistingFunction”。因此 VSC 检查函数是否已定义。我只有 ESLint 才有这个问题。

我是否错误地配置了 ESLint 或 Typescript？

我已经按照How to use ESLint TypeScript Airbnb configuration? 中描述的方式安装了 TypeScript 和 ESLint

Typescript 和 ESLint 配置文件如下：

.eslintrc.js:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser', // allows ESLint to understand TypeScript syntax
  parserOptions: {
    project: ['./tsconfig.json'],      // required for "type-aware linting"
  },
  plugins: [
    '@typescript-eslint',              // allows to use the rules within the codebase
  ],
  extends: [
    'airbnb-typescript/base',          //use Airbnb config
  ],
  rules: { }
};

tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "sourceMap": true
  }
}

package.json:

{
  "name": "iw-components",
  "version": "0.1.0",
  "description": "...",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iwis/iw-components.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/iwis/iw-components/issues"
  },
  "homepage": "https://github.com/iwis/iw-components#readme",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.34.0",
    "@typescript-eslint/parser": "^2.34.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-typescript": "^7.2.1",
    "eslint-config-standard-with-typescript": "^16.0.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "typescript": "~3.7.5"
  }
}

【问题讨论】：

我认为我的问题中包含了所有内容。我添加了代码库的链接以防万一。你在评论中提到了它，所以我现在可以从我的问题中删除它。
正如我在上面的评论中所说，请添加显示上面iwAddClassAndRemoveInSiblings 的导出和导入的代码。它不存在——至少不是文本；如果它隐藏在图像中，那就是另一个问题：请始终将代码、错误消息、标记等发布为作为文本，而不是作为文本的图片。为什么：meta.stackoverflow.com/q/285551/157247（不过，一张图片可以是一个不错的添加。）
完成。我希望现在包含整个相关代码。我不导出和导入功能。到目前为止，它没有问题。只有 ESLint 开始报告问题。
啊！那就是问题所在。你需要告诉 ESLint 它是一个全局的。

标签： typescript eslint typescript-eslint

【解决方案1】：

问题在于 ESLint 不知道它是一个全局函数。你有两个选择（至少）：

不要使用全局变量 - 从历史上看，全局变量是许多错误的来源。改用模块。或者，
告诉 ESLint 它是一个全球性的。

#2 有两个部分：在定义函数的文件中，您需要告诉 ESLint 该函数不是“未使用”，在使用它的文件中，您需要告诉 ESLint它。

查看文档了解详情，但基本上：

要告诉 ESLint 一个函数未被使用，请使用注释 described here，例如：
```
/* exported iwAddClassAndRemoveInSiblings */
```
要告诉 ESLint 它存在（在另一个文件中），请使用注释 described here，例如：
```
/* global iwAddClassAndRemoveInSiblings */
```

但我强烈建议改用模块。

【讨论】：