带有 ESlint 设置的 React.js

Posted 2023-02-21

【中文标题】带有 ESlint 设置的 React.js

【英文标题】：React.js with ESlint settings

【发布时间】：2018-01-26 14:52:11

【问题描述】：

当我使用 ESLint 检查我的代码时，我得到了这个错误---'React' is defined but never used no-unused-vars

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

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

【参考方案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 良好实践。

【讨论】：

还有eslint 我强烈推荐使用prettier。它是运行eslint 后格式化代码的绝佳工具。