ESLint: 'React' 已定义但从未使用过。(no-unused-vars) 使用 JSX pragma 时

Posted 2023-02-21

【中文标题】ESLint: \'React\' 已定义但从未使用过。(no-unused-vars) 使用 JSX pragma 时

【英文标题】：ESLint: 'React' is defined but never used.(no-unused-vars) when using JSX pragmaESLint: 'React' 已定义但从未使用过。(no-unused-vars) 使用 JSX pragma 时

【发布时间】：2020-09-01 18:18:31

【问题描述】：

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

我正在使用 airbnb 配置，我尝试将 "react/jsx-uses-react": 1, 添加为一条无效的规则。

使用airbnb时需要在extends中包含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"

【问题讨论】：

检查这个：github.com/eslint/eslint/issues/9583

@Fryla-CristianMarucci 你是否建议我需要添加 babel-plugin-transform-react-jsx？

是的，我认为值得一试。

【参考方案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>
);