8

所以我第一次尝试使用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，所以我可以看到这个导入被标记为从未使用过。（有透明色）

jsx 导入是透明的（从未使用过）

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

请帮助如何避免这个 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$" }
    ]
  }
}

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

4

2 回答 2

1
  • 安装Emotion 的 ESlint 插件
  • 添加"@emotion"到 .eslintrc 文件中的插件数组
  • 从 src 文件中删除 jsx 导入
  • 仔细检查您的文件顶部是否有正确的 linter 配置注释/** @jsx jsx */与/** @jsxImportSource @emotion/react */ 情感 css 道具文档
  • 重启你的应用服务器
于 2021-06-01T22:04:39.753 回答
1

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

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

于 2021-04-01T07:18:05.543 回答