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