ESLint रिएक्ट के साथ `नो-अप्रयुक्त-वार्स` त्रुटियाँ देता है

Question

मैंने सेटअप eslintऔर eslint-plugin-react।

जब मैं ESLint चलाता हूं, तो लिंटर no-unused-varsप्रत्येक रिएक्ट घटक के लिए त्रुटियां देता है ।

मैं मान रहा हूं कि यह पहचान नहीं रहा है कि मैं JSX या रिएक्ट सिंटैक्स का उपयोग कर रहा हूं। कोई विचार?

उदाहरण:

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

Comments

आप Reactइसका उपयोग नहीं करते हुए आयात कर रहे हैं, आप बस उपयोग कर रहे हैं Component, जो सही ढंग से आयात किया गया है।

— 20:38 बजे GMaiolo

यह समझ में आता है - लेकिन Headerत्रुटि भी क्यों होगी ? (आपको वास्तव में रिएक्ट आयात करने की आवश्यकता है, अन्यथा जब जेएसएक्स ट्रांसप्लड हो जाता है, तो यह एक त्रुटि देगा)

— डॉन पी

यह अब तक नहीं होना चाहिए। आपका अनुरक्षण संस्करण क्या है? github.com/eslint/eslint/issues/1905

— daniloprates

Answer 1

अपने में .eslintrc.json, नीचे extends, निम्नलिखित प्लगइन शामिल करें:

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

स्रोत

Comments

शानदार जवाब। निश्चित रूप से आपको पहले करना चाहिए (npm install --save-dev eslint-plugin-

— reaction

क्या होगा अगर आपके airbnb का उपयोग कर रहे हैं? मैंने पहले 'प्लगइन: प्रतिक्रिया / अनुशंसित' जोड़ने की कोशिश की, लेकिन यह काम नहीं किया: यह "प्लगइन: प्रतिक्रिया / अनुशंसित", "airbnb", "airbnb / हुक", "प्लगइन: प्रतिक्रिया-redux / अनुशंसित", "प्लगइन : प्रीटीयर / अनुशंसित "," प्रीटीयर / रिएक्शन ",],

— जॉनी-हार्ट

यहाँ आधिकारिक दस्तावेज है ... github.com/yannickcr/eslint-plugin-react#recommended

— केन लिन

Answer 2

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

Answer 3

चूंकि मैंने इसे गुगली करते हुए पाया था, आपको पता होना चाहिए कि यह सरल नियम इस संदेश को रोकने के लिए पर्याप्त है:

react/jsx-uses-react

react/recommendedनियमों का समूह कई अन्य नियम जोड़ता है जो आप नहीं चाहते हैं।

Answer 4

मेरे मामले में मुझे आपके साथ जोड़ने की जरूरत है .eslintrc.js:

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

प्रचार आयात से छुटकारा पाने के लिए एक विशिष्ट ट्वीकिंग: import { h } from 'preact'लेकिन आप इस उदाहरण का उपयोग अपनी विशिष्ट चेतावनियों से छुटकारा पाने के लिए कर सकते हैं:

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

Answer 5

शीघ्र ठीक करना

सभी टाइटलकेस चर को अनदेखा करने के लिए, इसे अपने ESLint कॉन्फ़िगरेशन में जोड़ें:

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

ठीक करना

रिएक्ट चर को अनदेखा करने के लिए एस्लिंट-प्लगइन-प्रतिक्रिया का उपयोग करें ।

npm install eslint-plugin-react -D

इसे अपने ESLint कॉन्फ़िगरेशन में जोड़ें:

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

सुझाया गया ठीक

अपने JSX उपयोग को बेहतर बनाने के लिए eslint-plugin-reaction का प्रयोग करें , न कि केवल इस त्रुटि को चुप करने के लिए।

npm install eslint-plugin-react -D

इसे अपने ESLint कॉन्फ़िगरेशन में जोड़ें:

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

---

यदि आप XO का उपयोग करते हैं , तो eslint-config-xo-response देखें ।

Answer 6

यदि आप प्रोजेक्ट create-react-app CLI के माध्यम से बनाते हैं, तो आप npm run ejectइस तरह से पैकेज .json "eslintConfig" फ़ील्ड को संपादित और संपादित कर सकते हैं :

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

एस्लेंट को बंद कर दिया जाएगा