reactjs - 创建 React App 上的情绪 js - 'jsx' 已定义但从未使用

Question

所以我尝试使用 emotion-js第一次并被 css prop 功能迷住了。

在尝试文档所说的内容时，我收到了来自 eslint 的警告。

'jsx' is defined but never used @typescript-eslint/no-unused-vars

我使用的脚本看起来像这样。

import React from "react";
//** @jsx jsx */
import { jsx } from "@emotion/core";

export const Component = () => {
    return (
        <div css={{color: red}}>
            This is a component
        </div>
    )
}

我正在使用 VSCode，所以我可以看到这个导入被标记为从未使用过。 (有透明色)



但是我确实将它用于我的 div，如果我删除导入，我的 css prop 会显示错误。

请帮助了解如何避免此 eslint 警告，或者至少让 VSCode 识别出正在使用 jsx。

谢谢!

编辑:(添加引用)

引用: https://emotion.sh/docs/css-prop#jsx-pragma

编辑 2:我尝试添加 .eslintrc看起来像这样的文件

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      2,
      { "vars": "all", "args": "all", "varsIgnorePattern": "^jsx$" }
    ]
  }
}

仍然收到警告，我做错了吗？

Answer 1

情感提供its own eslint plugin这应该会自动为您处理。
另一种方法是使用 emotion's babel plugin自动添加 jsx进口和 jsx pragma 注释在编译时自动注释。这样，您不再需要将它们添加到您的每个文件中。