使用TypeScript+Maquette JSX时ESLint提示'jsx'未使用如何解决

问题原因 #

你已在tsconfig中配置了自定义JSX工厂函数jsx，TypeScript编译时会自动将JSX片段转换为jsx()调用，所以代码可以正常运行。但ESLint默认未开启JSX语法识别，也不知道你使用了自定义的JSX工厂函数，因此无法识别到导入的jsx已被隐式调用，才会抛出未使用变量的警告。

修复步骤 #

1. 开启ESLint的JSX语法识别
   修改你的.eslintrc.json文件，在parserOptions配置项中添加ecmaFeatures.jsx: true：

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

2. 为@typescript-eslint/no-unused-vars规则指定JSX工厂函数
   修改你的.typescript.eslintrc.json文件，给规则添加jsxPragma参数，值设为你自定义的工厂函数名jsx：

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

修改完成后重新运行ESLint，警告就会消失。

内容的提问来源于stack exchange，提问作者JDB