ESLint：使用 JSX pragma 时定义了“React”但从未使用过（no-unused-vars）

Question

当我使用 jsx pragma 时，如何阻止 eslint 抛出错误。

我正在使用爱彼迎配置，并且尝试添加"react/jsx-uses-react": 1,规则但没有成功。

使用爱彼迎时，我需要包含plugin:react/recommended在扩展中吗？

.eslintrc.js

  extends: [
    "airbnb",
    "airbnb/hooks",
    "plugin:react-redux/recommended",
    "plugin:prettier/recommended",
    "prettier/react",
  ],
  settings: {
    react: {
      version: "detect",
    },
  },
  plugins: ["emotion", "graphql", "prettier", "react-redux"],
  rules: {
    "emotion/jsx-import": "error",
    "emotion/no-vanilla": "error",
    "emotion/import-from-emotion": "error",
    "emotion/styled-import": "error",
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    "graphql/template-strings": [
      `error`,
      {
        env: `relay`,
        tagName: `graphql`,
      },
    ],
  },

layout.js

/* ESLint: 'React' is defined but never used.(no-unused-vars) */
import React from "react" 
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

/** @jsx jsx */
import { Global, css, jsx } from "@emotion/core"
import { ThemeProvider } from "emotion-theming"

Answer 1

我在仅导出样式组件时遇到了类似的问题。我把它包裹起来<React.Fragment>并导出。

前：

import React from 'react';
import styled from '@emotion/styled';

export const LabelText = styled.span`
  font-size: 0.75em;
  font-weight: 500;
`;

后：

import React from 'react';
import styled from '@emotion/styled';

const StyledSpan = styled.span`
  font-size: 0.75em;
  font-weight: 500;
`;

export const LabelText = ({ children }) => (
  <React.Fragment>
    <StyledSpan>{children}</StyledSpan>
  </React.Fragment>
);