React가있는 ESLint는`no-unused-vars` 오류를 제공합니다.

React가있는 ESLint는`no-unused-vars` 오류를 제공합니다.

---

나는 eslint& eslint-plugin-react.

ESLint를 실행할 때 linter는 no-unused-vars각 React 구성 요소에 대한 오류를 반환 합니다.

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

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

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

---

의 .eslintrc.json에서 아래 extends에 다음 플러그인을 포함합니다.

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

출처

---

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

---

인터넷 검색 중에 이것을 발견 했으므로 다음과 같은 간단한 규칙으로도이 메시지를 방지 할 수 있습니다.

react/jsx-uses-react

react/recommended규칙 세트는 추가 다른 많은 규칙 당신이 원하는하지 않을 수 있습니다.

---

제 경우에는 다음을 추가해야했습니다 .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:

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

---

From this create-react-app github issue.

You could also add the following line above the first line:

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

참고URL : https://stackoverflow.com/questions/42541559/eslint-with-react-gives-no-unused-vars-errors