带有 React 的 ESLint 给出了 `no-unused-vars` 错误 [英] ESLint with React gives `no-unused-vars` errors

问题描述

我已经设置了 eslint &eslint-plugin-react.

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

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

示例:

app.js

import React, { Component } from 'react';从'./header.js'导入标题；导出默认类 App 扩展组件 {使成为() {返回 (<div><标题/>{this.props.children}

);}}

Linter 错误:

/my_project/src/components/app.js定义了 1:8 错误React"但从未使用过 no-unused-vars2:8 错误 'Header' 已定义但从未使用过 no-unused-vars

这是我的 .eslintrc.json 文件:

<代码>{环境":{浏览器":真的，es6":真},扩展":eslint:推荐"，解析器选项":{ecmaFeatures":{experimentalObjectRestSpread":真，jsx":真},源类型":模块"},插件":[反应"],规则":{"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],缩进":[错误"，2],换行式":[错误"，Unix"],引号": [错误"，单身的"],半":[错误"，总是"]}}

解决方案

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

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

'扩展':['插件:反应/推荐']

来源

I've setup eslint & eslint-plugin-react.

When I run ESLint, the linter returns no-unused-vars errors for each React component.

I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?

Example:

app.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:

/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.json file:

{
    "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"
        ]
    }
}

解决方案

First, install the following module npm install --save-dev eslint-plugin-react.

Then, in your .eslintrc.json, under extends, include the following plugin:

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

Source

这篇关于带有 React 的 ESLint 给出了 `no-unused-vars` 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！