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

Question

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

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

'jsx' 已定义但从未使用过 @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

Emotion 提供了自己的 eslint 插件，应该会自动为您处理这个问题。

另一种方法是使用情感的 babel 插件在编译时自动添加jsximport 和pragma 注释。jsx这样，您不再需要将它们添加到每个文件中。