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

먼저 다음 모듈을 설치하십시오 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",
    }
  },`

eslint가 닫힙니다