React.js with ESlint settings

1
votes

When I use ESLint check my code, I got this error---'React' is defined but never used no-unused-vars

import React from 'react';
const app=({})=>{
    return <div>123</div>;
};
export default app;

How could I modify my .eslintrc.json file to fix this error?

1
reactjseslint

1 Answers

3
votes

Use eslint-plugin-react eslint plugin which introduces React specific linting rules for eslint.

Simply you can install it with npm and configure it in your eslint config file.

npm install eslint-plugin-react --save-dev

{
  "plugins": [
    "react"
  ]
}

and then you need enable react/jsx-uses-react rule in eslint config file.

"rules": {
   // other rules,
   "react/jsx-uses-react": 2
}

Or you can you enable all recommended eslint-plugin-react configs with extends property.

{
  "extends": [... /*other presets*/, "plugin:react/recommended"]
}

However, this will enable some additional rules also which enforces React good practices.