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

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

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

まず、次のモジュールをインストールしますnpm install --save-dev eslint-plugin-react。

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

'extends': [
    'plugin: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" 
}

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

react/jsx-uses-react

react/recommendedルールのセットは、不要な他の多くのルールを追加します。

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

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

さらに、正確なインポートを取り除くための特定の調整：import { h } from 'preact'ただし、この例を使用して、次のような特定の警告を取り除くことができます。

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

最速の修正

すべてのTitleCase変数を無視するには、これをESLint構成に追加します。

{
    "rules": {
        "no-unused-vars": [
            "error",
            {
                "varsIgnorePattern": "^[A-Z]"
            }
        ]
    ]
}

正しい修正

eslint-plugin-reactを使用して、React変数を無視します。

npm install eslint-plugin-react -D

これをESLint構成に追加します。

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

推奨される修正

使用はeslint-プラグイン反応し、このエラーを黙らせるだけでなく、あなたのJSXの使用状況を改善するために。

npm install eslint-plugin-react -D

これをESLint構成に追加します。

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

XOを使用する場合は、eslint-config-xo-reactを参照してください。

create-react-app CLIを使用してプロジェクトを作成する場合はnpm run eject、次のようにpackage.jsonの「eslintConfig」フィールドを編集できます。

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

エスリントは閉鎖されます