误报 eslint(no-unused-vars)

Question

Here you can see I have a very simple react component, but the eslint rule is giving me a false positive.

Config Details

package.json

"devDependencies": {
    "eslint": "^5.13.0",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.0.1",
}

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ],
        "react-hooks/rules-of-hooks": "error"
    },
    "settings": {
        "react": {
            "createClass": "createReactClass", // Regex for Component Factory to use, default to "createReactClass"
            "pragma": "React",  // Pragma to use, default to "React"
            "version": "detect", // React version. "detect" automatically picks the version you have installed. You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
        },
        "linkComponents": [
            // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
            "Hyperlink",
            { "name": "Link", "linkAttribute": "to" }
        ]
    }
};

Answer 1

ESLint doesn't know React semantics for variable usage in JSX by default. To fix this, I could either enable the react/jsx-uses-vars rule or extend from plugin:react/recommended configuration. I went with the latter.

"extends": ["eslint:recommended", "plugin:react/recommended"]