web-dev-qa-db-ja.com

Reactを指定したESLintは、「no-unused-vars」エラーを返します

eslintとeslint-plugin-reactをセットアップしました。

ESLintを実行すると、リンターはReactコンポーネントごとにno-unused-varsエラーを返します。

JSXまたはReact構文を使用していることを認識していないと仮定しています。何か案は？

例：

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>
    );
  }
}

リンターエラー：

/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"
        ]
    }
}
javascriptreactjsjsxeslint
55
Don P

.eslintrc.jsonのextendsの下に、次のプラグインを含めます。

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

ソース

105
edwarddamato

react/recommendedインストールeslint-plugin-reactから新しいルールを追加せずにこの唯一の問題を解決するには：

npm i eslint-plugin-react --save

.eslintrc.jsを追加：

"plugins": ["react"]

そして：

"rules": {   
     "react/jsx-uses-react": "error",   
     "react/jsx-uses-vars":
     "error" 
}
33
Mihey Mik

グーグル検索中にこれを見つけたので、この単純なルールでこのメッセージを防ぐのに十分であることを知っておく必要があります。

react/jsx-uses-react

react/recommendedルールセットは、 他の多くのルール を追加する場合があります。

10
Fiaxhs

私の場合、.eslintrc.jsを追加する必要がありました。

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

さらに、プリアクトインポートを削除する特定の調整：import { h } from 'preact'が、この例を使用して特定の警告を削除することができます。

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

これから create-react-app github issue 。

最初の行の上に次の行を追加することもできます。

// eslint-disable-next-line no-unused-vars
import React from 'react'
0
Eli