'jsx‘上的情感-js被定义，但从未使用过。

Question

因此，我第一次尝试使用emotion-js，并被css的道具特性所吸引。

当我尝试文档上说的话时，我收到了一个警告。

“‘jsx”是定义的，但从未使用@typescript-eslint/no- used 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支柱就会显示出一个错误。

请帮助如何避免这种重复警告，或至少使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

情感为您提供了应该自动处理这一问题的它自己的eslint插件。

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

Answer 2

• 安装情感的ESlint插件
• 将"@emotion"添加到.eslintrc文件中的插件数组中
• 从src文件中删除jsx导入。
• 再次检查您的文件/** @jsx jsx */ vs /** @jsxImportSource @emotion/react */ 情感css道具文档顶部有正确的linter配置注释。
• 重新启动应用服务器