প্রতিক্রিয়া সহ ESLint `না-অব্যবহৃত-বর্ণ ত্রুটি দেয়

Question 1

আমি সেটআপ করেছি eslint& eslint-plugin-react।

আমি যখন ইএসলিন্ট চালনা করি, তখন no-unused-varsপ্রতিটি রেঅ্যাক্ট উপাদানগুলির জন্য লিন্টার ত্রুটিগুলি প্রদান করে।

আমি ধরে নিচ্ছি যে এটি জেএসএক্স বা প্রতিক্রিয়া সিনট্যাক্স ব্যবহার করছি তা স্বীকৃতি দিচ্ছে না। কোন ধারনা?

উদাহরণ:

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

Question 2

প্রথমে নিম্নলিখিত মডিউলটি ইনস্টল করুন npm install --save-dev eslint-plugin-react।

তারপরে, আপনার .eslintrc.jsonনীচে extends, নিম্নলিখিত প্লাগইনটি অন্তর্ভুক্ত করুন:

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

উৎস

Question 3

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

Question 4

গুগল করার সময় যেহেতু আমি এটি পেয়েছি তাই আপনার জানা উচিত যে এই সাধারণ বার্তাটি এই বার্তাটি রোধ করার জন্য যথেষ্ট:

react/jsx-uses-react

react/recommendedনিয়ম সেট যোগ অন্যান্য অনেক নিয়ম আপনি চান না হতে পারে।

Question 5

আমার ক্ষেত্রে আপনার যুক্ত করতে হবে .eslintrc.js:

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

এছাড়াও প্র্যাক্ট আমদানি থেকে মুক্তি পাওয়ার জন্য একটি নির্দিষ্ট টুইট করা: import { h } from 'preact'তবে আপনি আপনার নির্দিষ্ট সতর্কতা থেকে মুক্তি পেতে এই উদাহরণটি ব্যবহার করতে পারেন:

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

Question 6

দ্রুততম ঠিক করা

সমস্ত শিরোনাম কেস ভেরিয়েবল উপেক্ষা করতে, আপনার 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"
    }
}

প্রস্তাবিত ঠিক করা

ব্যবহারের eslint-plugin-প্রতিক্রিয়া শুধু এই ত্রুটি নীরবতা আপনার JSX ব্যবহার উন্নত করতে।

npm install eslint-plugin-react -D

এটি আপনার ESLint কনফিগারেশনে যুক্ত করুন:

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

আপনি ব্যবহার করেন তাহলে XO , পড়ুন eslint-কনফিগ-XO-প্রতিক্রিয়া ।

Question 7

আপনি যদি প্রকল্পটি npm run ejectক্রিয়েট-রিএ্যাক্ট -অ্যাপ্লিকেশন সিএলআইয়ের মাধ্যমে তৈরি করেন তবে আপনি প্যাকেজটি সম্পাদন করতে পারেন এবং জাজান "এসলিন্টকনফিগ" ফিল্ডটি এইরকম করতে পারেন:

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

এসলিন্টটি বন্ধ হয়ে যাবে