typescript - 使用 TypeScript 和 Maquette JSX，但 linter 说“jsx”未使用

Question

我正在使用 TypeScript 和 Maquette 来编译 .tsx 文件。代码可以正确编译并在浏览器中运行，但 ESLint 对我的jsx函数不满意，将其标记为“未使用的 var”。

我试图尽可能地模仿TypeScript Maquette 入门项目，但是当我查看该项目时，我没有看到 linter 警告。不知何故，在启动项目中，ESLint 和 TypeScript 认识到这jsx是我的工厂函数，但在我的项目中，尽管在我看来配置相同，但事实并非如此。

我缺少的拼图是什么？尽管多次阅读所有文档并以我能想象的各种方式进行谷歌搜索，但我还没有找到任何可以确定问题原因的内容。

徽章.tsx

import { jsx } from "maquette-jsx";
import { VNode } from "maquette";
import Component from "../../core/component";

export default class Badge extends Component {
    init():void {}

    renderVDom():VNode {
        const {
            gc,
            state: { label },
        } = this;

        return (
            <div key={this} class={gc("badge")} title={label}>
                { label }
            </div>
        );
    }
}

但是当我运行 eslint ( ./node_modules/.bin/eslint . --ext .json,.js,.ts,.jsx,.tsx) 时，我收到以下警告：

.../js/components/badge/badge.tsx
  1:10  warning  'jsx' is defined but never used  @typescript-eslint/no-unused-vars

我在下面包含了我的配置文件，但这是一个大项目，所以我正在编辑我认为不相关的部分：

包.json

{
  "name": "...",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.25.0",
    "@typescript-eslint/parser": "^4.25.0",
    "eslint": "7.7.x",
    "maquette-jsx": "^3.0.1",
    "ts-loader": "^8.3.0",
    "typescript": "^4.2.4"
  },
  "dependencies": {
    "maquette": "^3.5.0"
  }
}

tsconfig.json

{
    "include": [
        "./js/**/*.ts",
        "./js/**/*.tsx"
    ],
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "jsx",
        "module": "es6",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "outDir": "./dist/",
        "resolveJsonModule": true,
        "target": "es6",
        "lib": [
            "DOM",
            "ES2020"
        ]
    }
}

.eslintrc.json

{  
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "./.typescript.eslintrc.json"
  ]
}

.typescript.eslintrc.json

{
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "rules": {
                "@typescript-eslint/no-unused-vars": "warn",

                "no-unused-vars": "off"
            }
        }
    ]
}

Answer 1