{"id":609,"hash":"f9b7140b02cc6788b3db905c63ab9c5fa5d31e4edf2283e41de0fdc8502bb0f7","pattern":"ESLint with React gives `no-unused-vars` errors","full_message":"I've setup eslint & eslint-plugin-react. \n\nWhen I run ESLint, the linter returns no-unused-vars errors for each React component.\n\nI'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?\n\nExample: \n\napp.js\n\nimport React, { Component } from 'react';\nimport Header from './header.js';\n\nexport default class App extends Component {\n  render() {\n    return (\n      <div>\n        <Header />\n        {this.props.children}\n      </div>\n    );\n  }\n}\n\nLinter Errors:\n\n/my_project/src/components/app.js\n  1:8  error  'React' is defined but never used   no-unused-vars\n  2:8  error  'Header' is defined but never used  no-unused-vars\n\nHere is my .eslintrc.json file:\n\n{\n    \"env\": {\n        \"browser\": true,\n        \"es6\": true\n    },\n    \"extends\": \"eslint:recommended\",\n    \"parserOptions\": {\n        \"ecmaFeatures\": {\n            \"experimentalObjectRestSpread\": true,\n            \"jsx\": true\n        },\n        \"sourceType\": \"module\"\n    },\n    \"plugins\": [\n        \"react\"\n    ],\n    \"rules\": {\n        \"react/jsx-filename-extension\": [1, { \"extensions\": [\".js\", \".jsx\"] }],\n        \"indent\": [\n            \"error\",\n            2\n        ],\n        \"linebreak-style\": [\n            \"error\",\n            \"unix\"\n        ],\n        \"quotes\": [\n            \"error\",\n            \"single\"\n        ],\n        \"semi\": [\n            \"error\",\n            \"always\"\n        ]\n    }\n}","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"First, install the following module npm install --save-dev eslint-plugin-react.\n\nThen, in your .eslintrc.json, under extends, include the following plugin:\n\n'extends': [\n    'plugin:react/recommended'\n]\n\nSource","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/42541559/eslint-with-react-gives-no-unused-vars-errors","votes":156,"created_at":"2026-04-19T04:51:24.118787+00:00","updated_at":"2026-04-19T04:51:24.118787+00:00"}