ESLint with React에서 "no-used-vars" 오류가 발생함

ESLint with React에서 "no-used-vars" 오류가 발생함

셋업 완료eslint&eslint-plugin-react.

ESLint를 실행하면 린터가 반환됩니다.no-unused-vars각 React 컴포넌트에 대한 오류입니다.

JSX 또는 React 구문을 사용하고 있는 것이 인식되지 않는 것 같습니다.좋은 생각 있어요?

예:

app.module

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규칙 집합은 원하지 않을 수 있는 다른 많은 규칙을 추가합니다.

가장 빠른 수정

Title Case 변수를 모두 무시하려면 ESLint 설정에 다음 명령을 추가합니다.

{
    "rules": {
        "no-unused-vars": [
            "error",
            {
                "varsIgnorePattern": "React"
            }
        ]
    ]
}

올바른 수정

반응 변수를 무시하려면 eslint-plugin-react를 사용합니다.

npm install eslint-plugin-react -D

ESLint 설정에 추가합니다.

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

권장 수정

eslint-plugin-react를 사용하여 이 오류를 잠재우는 것뿐만 아니라 JSX 사용률을 개선하십시오.

npm install eslint-plugin-react -D

ESLint 설정에 추가합니다.

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

---

XO 를 사용하는 경우는, eslint-config-xo-react 를 참조해 주세요.

내 경우엔 네 말을 더해야 했어.eslintrc.js:

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

또한 사전 조치 Import를 제거하기 위한 특정 조정:import { h } from 'preact'단, 이 예를 사용하여 다음과 같은 특정 경고를 제거할 수 있습니다.

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

2022

ESLint를 더 많은 구성으로 사용하는 경우 다음 순서에 주의하십시오.extends속성 배열

{
    extends: [
        'eslint:recommended',
        'plugin:react/jsx-runtime',
        'plugin:react/recommended',
        'plugin:prettier/recommended',
        'prettier',
      ],
      plugins: ['react'],

   //...
}

예를 들어, 다음과 같이 합니다.'plugin:react/recommended'다른 리액트 설정 후.장소'react'플러그인으로도 사용할 수 있습니다.또, 보다 예쁜 것을 사용하고 있는 경우는, 적절한 설정을 따르고 있는 것을 확인해 주세요.

에서 할 수 있다.eslintrc.js

"rules": {   
 "react/jsx-uses-react": 2,   
 "react/jsx-uses-vars": "error" 
}

어제 리액트를 배우기 시작한 것과 같은 오류가 발생했습니다.단말기에 오류가 표시되며 미사용 변수 오류를 무시하는 것은 매우 간단합니다.

터미널 오류:

Line 5:17:  'setBlog' is assigned a value but never used  no-unused-vars
Search for the keywords to learn more about each warning.

추가만 하면 됩니다.// eslint-disable-next-line사용하지 않는 변수의 오류가 있는 변수 앞에 있는 이 행.맘에 들다,

// eslint-disable-next-line
const [blogs, setBlog] = useState(... my code)

eslintrc.displays에서 다음을 추가하면 오류가 해결됩니다.

  plugins: [
    'react/recommended',
  ],

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

1st install npm 
npm install --save-dev eslint-plugin-react

In Package.json replace eslintConfig declaration

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "plugin":"react/recommended",
    "rules": {
      "react/jsx-uses-react": "error",   
       "react/jsx-uses-vars": "error" 
    }
  },

create-react-app CLI를 통해 프로젝트를 생성하면 다음과 같은 작업을 수행할 수 있습니다.npm run eject패키지를 편집합니다.json "eslintConfig" 필드:

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

eslint가 닫힙니다.

Create-react-app을 사용하는 경우 아무것도 설치하거나 꺼낼 필요가 없습니다.심플한 솔루션은 다음과 같습니다.

그 이후no-unused-vars-errors에서 던져졌다webpackHotDevClient.js 해서 '아까운 곳'으로 /node_modules/react-scripts/config/webpack.config.dev.js." ESLintPlugin"new ESLintPlugin"을 합니다.

'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0

Eslint의 공식 문서에 따르면 이걸 먹어본 적이 있나요?

/* eslint no-unused-vars : "off" */

코드 내 어디에나 있는 그대로 이 행을 추가합니다.당신의 경고가 사라지고 당신에게 도움이 될 수 있기를 바랍니다.

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