如何使用 React 设置 Eslint答案

【问题标题】：How to set up Eslint with React如何使用 React 设置 Eslint
【发布时间】：2021-03-12 23:28:21
【问题描述】：

我正在使用带有 React 和 Eslint 的 webpack，我已经在 Eslint 上设置了扩展，但是它仍然显示 'React' is defined but never used.eslintno-unused-vars

这是我的 .eslintrc 文件：

{
    "parser": "babel-eslint",
    "extends": ["eslint:recommended", "plugin:react/recommended", "airbnb", "prettier"],
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2015
    },
    "env": {
        "browser": true,
        "node": true,
        "jest": true,
        "commonjs": true
    },
    "rules": {
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "linebreak-style": "off",
        "no-undef": "off",
        "no-debugger": "off",
        "no-alert": "off",
        "indent": ["error", 4],
        "quotes": "off",
        "no-console": "off"
    }
}

React 版本是^17.0.1

babel-eslint 是 ^10.1.0

eslint 是^7.14.0

eslint-plugin-react 是 ^7.21.5

【问题讨论】：

标签： reactjs webpack eslint

【解决方案1】：

看起来它与文件中的实际 JSX 有关

您的配置在实际包含有效 JSX 的文件上运行良好：

// App.jsx
import React from 'react'; // 
const App = () => {
    return <div />; // JSX
}

export default App

但是如果在文件中没有找到 JSX，它会抛出你描述的错误：

// App.jsx
import React from 'react'; // 'React' is defined but never used 
const App = () => {
    return 1; // no JSX
}

export default App

【讨论】：