Javascript 带有 React 的 ESLint 给出了 `no-unused-vars` 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42541559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ESLint with React gives `no-unused-vars` errors
提问by Don P
I've setup eslint& eslint-plugin-react.
我已经设置eslint& eslint-plugin-react。
When I run ESLint, the linter returns no-unused-varserrors for each React component.
当我运行 ESLint 时，linter 会no-unused-vars为每个 React 组件返回错误。
I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?
我假设它没有意识到我正在使用 JSX 或 React 语法。有任何想法吗？
Example:
例子：
app.js
应用程序.js
import React, { Component } from 'react';
import Header from './header.js';
export default class App extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
}
Linter Errors:
Linter 错误：
/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
Here is my .eslintrc.jsonfile:
这是我的.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"
]
}
}
回答by edwarddamato
回答by Mihey Mik
To solve this only problem without adding new rules from react/recommendedinstall eslint-plugin-react:
要在不从react/recommendedinstall添加新规则的情况下解决这个唯一的问题eslint-plugin-react：
npm install eslint-plugin-react --save-dev
add in .eslintrc.js:
添加.eslintrc.js：
"plugins": ["react"]
and:
和：
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
回答by Fiaxhs
Since I found this while googling, you should know that this simple rule is enough to prevent this message:
由于我在谷歌搜索时发现了这一点，您应该知道这个简单的规则足以防止出现此消息：
react/jsx-uses-react
The react/recommendedset of rules adds many other rulesyou may not want.
回答by Picard
In my case I needed to add in your .eslintrc.js:
就我而言，我需要添加您的.eslintrc.js：
'extends': [
'plugin:react/recommended'
]
plus a specific tweaking to rid of preact import: import { h } from 'preact'but you can use this example to get rid of your specific warnings like so:
加上一个特定的调整来摆脱 preact 导入：import { h } from 'preact'但是你可以使用这个例子来摆脱你的特定警告，如下所示：
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "^h$"
}
],
回答by fregante
Quickest fix
最快的修复
To ignore all TitleCase variables, add this to your ESLint config:
要忽略所有 TitleCase 变量，请将其添加到您的 ESLint 配置中：
{
"rules": {
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "^[A-Z]"
}
]
]
}
Correct fix
正确修复
Use eslint-plugin-reactto ignore React variables.
使用eslint-plugin-react忽略 React 变量。
npm install eslint-plugin-react -D
Add this to your ESLint config:
将此添加到您的 ESLint 配置中：
{
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error"
}
}
Suggested fix
建议修复
Use eslint-plugin-reactto improve your JSX usage, not just to silence this error.
使用eslint-plugin-react来改善你的 JSX 使用，而不仅仅是为了消除这个错误。
npm install eslint-plugin-react -D
Add this to your ESLint config:
将此添加到您的 ESLint 配置中：
{
"extends": [
"plugin:react/recommended"
]
}
If you use XO, refer to eslint-config-xo-react.
如果您使用XO，请参阅eslint-config-xo-react。
回答by Hyman L
If you create the project throught create-react-app CLI,You can npm run eject,and edit the package.json "eslintConfig" field,like this:
如果您通过 create-react-app CLI 创建项目，您可以npm run eject编辑 package.json "eslintConfig" 字段，如下所示：
`"eslintConfig": {
"extends": "react-app",
"rules": {
"eqeqeq": "off",
"no-unused-vars": "off",
}
},`
the eslint will be closed
eslint 将被关闭
