Использование TypeScript и Maquette JSX, но линтер говорит, что jsx не используется

Question

Я использую TypeScript и Maquette для компиляции файлов .tsx. Код правильно компилируется и запускается в браузере, но ESLint недоволен моей функцией, помечая ее как «неиспользуемую переменную».

Я попытался максимально точно имитировать стартовый проект TypeScriptMaquette , но когда я смотрю на этот проект, я не вижу предупреждения линтера. Каким-то образом в стартовом проекте ESLint и TypeScript распознают, что jsx это моя фабричная функция, но в моем проекте, несмотря на то, что мне кажется идентичной конфигурацией, это не так.

Какой у меня недостающий кусок головоломки? Несмотря на то, что я прочитал все документы несколько раз и погуглил всеми возможными способами, я не нашел ничего, что указывало бы на причину проблемы.

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

Answer 1

Недостающий фрагмент головоломки - это parserOptions.project.

На самом деле, parserOptions.jsxPragma также приемлемо, но поскольку имя фрагмента ("jsx") уже определено в проекте, и линтер может получать другую полезную информацию из файла tsconfig, часто имеет смысл установить project если ты можешь.

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

Проект указывает ESLint на файл конфигурации TypeScript, который имеет решающее значение для идентификации неявного вызова jsx().

Однако, если связывание вашего tsconfig с вашим eslint приводит к проблемам с производительностью, вы можете уменьшить масштаб и просто использовать jsxPragma:

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

Насколько мне известно, параметры парсера машинописного текста задокументированы только в файле Readme модуля NPM . Вероятно, это записано где-то еще, но быстрый поиск обычных мест ™ не дал подробных документов.