创建 React App 上的 Emotion-js - 'jsx' 已定义但从未使用过答案

【问题标题】：emotion-js on Create React App - 'jsx' is defined but never used创建 React App 上的 Emotion-js - 'jsx' 已定义但从未使用过
【发布时间】：2020-06-06 21:00:18
【问题描述】：

所以我第一次尝试使用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 道具会显示错误。

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

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

【问题讨论】：

jsx 正在被使用，可能是babeljs.io/docs/en/babel-plugin-transform-react-jsx
但是为什么我的 typescript-eslint 会发送这个警告呢？它似乎没有认识到正在使用 jsx。当我的项目变得更大时，这个 jsx 警告会令人不安。 :s
这可以通过添加// eslint-disable-next-line 轻松解决，但有人有更好的解决方案吗？也许是为了让这个 jsx 导入被 css 道具使用？
因为 linter 不知道这一点！您是否尝试过全局配置规则以忽略该名称？
这可能是评论上的拼写，我只让它与 /* @jsx jsx */ 或 /** @jsx jsx */ 一起使用，并带有一个前导斜杠

标签： reactjs eslint emotion typescript-eslint

【解决方案1】：

Emotion 提供了its own eslint plugin，应该会自动为您处理这个问题。

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

【讨论】：

我尝试添加插件并使用 babel 插件，但它并没有阻止 'jsx' is defined but never used 警告的发生。关于我可能忽略的任何其他想法或想法？
这类警告可能来自 ESLint。您是否尝试过配置 ESLint 以使用 ESLint 提供的 ESLint 插件？虽然如果你已经在使用 babel 插件，你应该可以只删除 jsx 导入。

【解决方案2】：

安装Emotion's ESlint plugin
将 "@emotion" 添加到 .eslintrc 文件中的插件数组中
从您的 src 文件中删除 jsx 导入
仔细检查文件顶部/** @jsx jsx */ vs /** @jsxImportSource @emotion/react */ emotion css prop docs 是否有正确的 linter 配置注释
重启应用服务器

【讨论】：