React.js 使用 ESlint 设置

Question

当我使用 ESLint 检查我的代码时，我得到了这个错误---'React' 已定义但从未使用过 no-unused-vars

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

我如何修改我的 .eslintrc.json 文件来修复这个错误？

Answer 1

使用 eslint-plugin-react eslint 插件，它为 eslint 引入了特定于 React 的 linting 规则。

您可以使用 npm 安装它并在您的 eslint 配置文件中配置它。

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

{
  "plugins": [
    "react"
  ]
}

然后您需要在 eslint 配置文件中启用 react/jsx-uses-react 规则。

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

或者您可以使用 extends 属性.

启用所有推荐的 eslint-plugin-react 配置

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

但是，这也会启用一些 additional rules 强制实施 React 良好实践的方法。

React.js with ESlint settings