使用 TypeScript 和 Maquette JSX 但 linter 说 'jsx' 未使用答案

【问题标题】：Using TypeScript and Maquette JSX but linter says 'jsx' is unused使用 TypeScript 和 Maquette JSX 但 linter 说 'jsx' 未使用
【发布时间】：2021-10-30 11:22:07
【问题描述】：

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

我试图尽可能地模仿TypeScript Maquette starter project，但是当我查看那个项目时，我没有看到 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

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

package.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"
            }
        }
    ]
}

【问题讨论】：

您在.typescript.eslintrc.json 中的覆盖上尝试过"@typescript-eslint/no-unused-vars": ["warn"], 吗？也许该字符串需要包装在一个数组中。
感谢@Marshal，但数组格式是可选的，用于提供额外的选项。问题不在于该规则（正确应用），问题在于 TypeScript 没有与 ESLint 就对 jsx 的隐式调用进行通信。
没问题，祝您好运解决您的问题。
感谢@Marshal --- 在仔细比较配置文件和测试理论几个小时后找到它。

标签： typescript jsx eslint tsx maquette

【解决方案1】：

拼图中缺少的部分是parserOptions.project。

其实parserOptions.jsxPragma 也是可以接受的，但是由于项目中已经定义了片段名称（“jsx”），并且 linter 能够从 tsconfig 文件中获取其他有用的信息，因此通常更有意义的是如果可以的话，设置project。

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },  
}

项目将 ESLint 指向 TypeScript 配置文件，这对于识别对 jsx() 的隐式调用至关重要。

但是，如果将 tsconfig 链接到 eslint 会导致性能问题，那么您可以缩减并只使用 jsxPragma：

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "jsxPragma": "jsx"
  },
}

据我所知，typescript-parser 选项仅记录在 NPM module Readme 上。它可能记录在其他地方，但快速搜索常见的地方™并没有找到任何详细的文档。

【讨论】：