使用 React 的 ESLint 会产生“ no-used-vars”错误

我已经设置了 eslint和 eslint-plugin-react。

当我运行 ESLint 时，行程为每个 React 组件返回 no-unused-vars错误。

我假设它没有意识到我在使用 JSX 或者 React 语法。有什么想法吗？

例如:

应用程序

import React, { Component } from 'react';
import Header from './header.js';


export default class App extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
}

牙线错误:

/my_project/src/components/app.js
1:8  error  'React' is defined but never used   no-unused-vars
2:8  error  'Header' is defined but never used  no-unused-vars

这是我的 .eslintrc.json文件:

{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
141278 次浏览
小开
最佳答案

首先，安装以下模块 npm install --save-dev eslint-plugin-react。

然后，在你的 .eslintrc.json中，在 extends下，包含以下插件:

'extends': [
'plugin:react/recommended'
]

来源

小开

因为我是在谷歌搜索时发现这条信息的，所以你应该知道这条简单的规则足以阻止这条信息:

react/jsx-uses-react

react/recommended规则集添加了您可能不想要的 许多其他的规则。

小开

要解决这个唯一的问题，不需要从 react/recommended中添加新的规则，请安装 eslint-plugin-react:

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

加入 .eslintrc.js:

"plugins": ["react"]

以及:

"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
小开

在我的情况下，我需要加入你的 .eslintrc.js:

'extends': [
'plugin:react/recommended'
]

加上一个特定的调整来去除 preact import: import { h } from 'preact'，但是你可以使用这个例子来去除特定的警告，如下所示:

    "no-unused-vars": [
"error",
{
"varsIgnorePattern": "^h$"
}
],
小开

最快的办法

要忽略所有 TitleCase 变量，请将其添加到您的 ESLint 配置中:

{
"rules": {
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "React"
}
]
]
}

正确修正

使用 埃林特-插件-反应忽略 React 变量。

npm install eslint-plugin-react -D

将此添加到您的 ESLint 配置:

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

建议的解决方案

使用 埃林特-插件-反应可以改进 JSX 的使用，而不仅仅是为了消除这个错误。

npm install eslint-plugin-react -D

将此添加到您的 ESLint 配置:

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

如果使用 大副，请参考 Eslint-config-xo-response。

小开

如果您通过 create-response-app CLI 创建项目，您可以 npm run eject并编辑 package.json“ eslintConfig”字段，如下所示:

`"eslintConfig": {
"extends": "react-app",
"rules": {
"eqeqeq": "off",
"no-unused-vars": "off",
}
},`

埃斯林特将被关闭

小开

如果您正在使用 Create-response-app，则不需要安装任何东西或者弹出，简单的解决方案是:

因为 no-unused-vars-errors是从 webpackHotDevClient.js抛出的，所以你只需要转到 /node_modules/react-scripts/config/webpack.config.dev.js. 关于“新的 ESLintPlugin”规则，只需添加:

'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0
小开

我有同样的错误，以及我开始学习反应昨天。终端显示错误，忽略未使用的变量错误非常简单。

来自终端的错误:

Line 5:17:  'setBlog' is assigned a value but never used  no-unused-vars
Search for the keywords to learn more about each warning.

只要在变量前面加上 // eslint-disable-next-line这一行，就会得到未使用变量的错误,

// eslint-disable-next-line
const [blogs, setBlog] = useState(... my code)
小开

根据 埃斯林特正式文件你试过这个吗

/* eslint no-unused-vars : "off" */

将此行添加到代码中的任何位置。希望你的警告可以消失，它可以帮助你

小开

在 eslintrc.js 增加跟随将解决错误

  plugins: [
'react/recommended',
],


rules: {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
},
小开 
1st install npm
npm install --save-dev eslint-plugin-react


In Package.json replace eslintConfig declaration


"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"plugin":"react/recommended",
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
},
小开

二零二二年

如果在更多配置中使用 ESLint，请注意 extends属性数组的顺序。

{
extends: [
'eslint:recommended',
'plugin:react/jsx-runtime',
'plugin:react/recommended',
'plugin:prettier/recommended',
'prettier',
],
plugins: ['react'],


//...
}

例如，确保在任何其他反应配置之后放置 'plugin:react/recommended'。将 'react'也作为一个插件放置，如果您使用的是更漂亮的，请确保您遵循一个适当的配置。

小开

你可以用 .eslintrc.js

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

提交答案