2

我在文件中有iwAddClassAndRemoveInSiblings功能：lib\iw-browser.ts

"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)

Visual Studio 代码中的错误

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

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

我已经按照以下描述的方式安装了 TypeScript 和 ESLint：如何使用 ESLint TypeScript Airbnb 配置？

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
  }
}

包.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"
  }
}
4

1 回答 1

1

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

  1. 不要使用全局变量——从历史上看，全局变量是很多错误的来源。改用模块。或者，
  2. 告诉 ESLint 它是一个全局的。

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

有关详细信息，请参阅文档，但基本上：

  • 要告诉 ESLint 一个函数未被使用，请使用此处描述的注释，例如：

    /* exported iwAddClassAndRemoveInSiblings */

  • 要告诉 ESLint 它存在（在另一个文件中），请使用此处描述的注释，例如：

    /* global iwAddClassAndRemoveInSiblings */

但我强烈建议改用模块。

于 2020-05-26T18:24:05.347 回答