ฉันตั้งค่าeslint& eslint-plugin-react.

เมื่อฉันเรียกใช้ ESLint ลินเตอร์จะส่งกลับno-unused-varsข้อผิดพลาดสำหรับส่วนประกอบปฏิกิริยา

ฉันสมมติว่าไม่รู้จักว่าฉันกำลังใช้ JSX หรือ React syntax ความคิดใด ๆ ?

ตัวอย่าง:

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

เนื่องจากฉันพบสิ่งนี้ในขณะที่ใช้ Google คุณควรทราบว่ากฎง่ายๆนี้เพียงพอที่จะป้องกันข้อความนี้:

react/jsx-uses-react

react/recommendedชุดของกฎเพิ่มกฎระเบียบอื่น ๆ อีกมากมายที่คุณอาจไม่ต้องการ

ในกรณีของฉันฉันต้องการเพิ่มใน.eslintrc.js:

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

บวกการปรับแต่งเฉพาะเพื่อกำจัดการนำเข้า preact: 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-plugin-reactเพื่อปรับปรุงการใช้งาน JSX ของคุณไม่ใช่เพียงเพื่อปิดเสียงข้อผิดพลาดนี้

npm install eslint-plugin-react -D

เพิ่มสิ่งนี้ในการกำหนดค่า ESLint ของคุณ:

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

ถ้าคุณใช้XOอ้างถึงeslint-config-XO-ตอบสนอง

หากคุณสร้างโปรเจ็กต์ผ่าน CLI create-react-app คุณสามารถnpm run ejectและแก้ไขฟิลด์ package.json "eslintConfig" ได้ดังนี้:

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

eslint จะปิด