У меня есть функция 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)
Страница HTML отображается правильно - функция iwAddClassAndRemoveInSiblings запускается без проблем. Visual Studio Code также знает, что используется функция iwAddClassAndRemoveInSiblings. Если я попытаюсь использовать несуществующую функцию, VS C скажет: Cannot find name 'nonExsistingFunction' . Итак, VS C проверяет, определена ли функция. У меня эта проблема только с ESLint.
Я неправильно настроил ESLint или Typescript?
Я установил TypeScript и ESLint способом, описанным на странице: Как использовать конфигурацию ESLint TypeScript Airbnb ?
Файлы конфигурации Typescript и ESLint приведены ниже:
.eslintr c. 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"
}
}