0

TypeScript と Maquette を使用して .tsx ファイルをコンパイルしています。コードは正しくコンパイルされ、ブラウザーで実行されますが、ESLint は私のjsx関数に不満を持っており、「未使用の var」としてフラグを立てています。

TypeScript Maquette スターター プロジェクトをできるだけ厳密に模倣しようとしましたが、そのプロジェクトを見ると、リンターの警告が表示されません。どういうわけか、スターター プロジェクトでは、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"
            }
        }
    ]
}
4

1 に答える 1