ESLint with React gives `no-unused-vars` errors

Question

I\'ve setup eslint & eslint-plugin-react.

When I run ESLint, the linter returns no-unused-vars errors for each React comp

Answer 1

Quickest fix

To ignore all TitleCase variables, add this to your ESLint config:

{
    "rules": {
        "no-unused-vars": [
            "error",
            {
                "varsIgnorePattern": "^[A-Z]"
            }
        ]
    ]
}

Correct fix

Use eslint-plugin-react to ignore React variables.

npm install eslint-plugin-react -D

Add this to your ESLint config:

{
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-vars": "error",
        "react/jsx-uses-react": "error"
    }
}

Suggested fix

Use eslint-plugin-react to improve your JSX usage, not just to silence this error.

npm install eslint-plugin-react -D

Add this to your ESLint config:

{
    "extends": [
        "plugin:react/recommended"
    ]
}

---

If you use XO, refer to eslint-config-xo-react.