Tôi đã thiết lập eslint& eslint-plugin-react.

Khi tôi chạy ESLint, linter trả về no-unused-varslỗi cho từng thành phần React.

Tôi cho rằng nó không nhận ra rằng tôi đang sử dụng cú pháp JSX hoặc React. Có ý kiến ​​gì không?

Thí dụ:

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>
    );
  }
}

Lỗi 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

Đây là .eslintrc.jsontệp của tôi :

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

Trong .eslintrc.json, dưới của bạn , extendshãy bao gồm plugin sau:

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

Nguồn

Để giải quyết vấn đề này duy nhất mà không cần thêm các quy tắc mới từ react/recommendedcài đặt eslint-plugin-react:

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

thêm vào .eslintrc.js:

"plugins": ["react"]

và:

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

Vì tôi đã tìm thấy điều này trong khi googling, bạn nên biết rằng quy tắc đơn giản này là đủ để ngăn thông báo này:

react/jsx-uses-react

Bộ react/recommendedquy tắc bổ sung nhiều quy tắc khác mà bạn có thể không muốn.

Trong trường hợp của tôi, tôi cần thêm vào .eslintrc.js:

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

cộng với một điều chỉnh cụ thể để loại bỏ tính năng nhập chính xác: import { h } from 'preact'nhưng bạn có thể sử dụng ví dụ này để loại bỏ các cảnh báo cụ thể như sau:

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

Sửa chữa nhanh nhất

Để bỏ qua tất cả các biến TitleCase, hãy thêm biến này vào cấu hình ESLint của bạn:

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

Sửa chữa đúng

Sử dụng eslint-plugin-react để bỏ qua các biến React.

npm install eslint-plugin-react -D

Thêm cái này vào cấu hình ESLint của bạn:

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

Đề xuất sửa chữa

Sử dụng eslint-plugin-react để cải thiện việc sử dụng JSX của bạn, không chỉ để chặn lỗi này.

npm install eslint-plugin-react -D

Thêm cái này vào cấu hình ESLint của bạn:

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

Nếu bạn sử dụng XO , hãy tham khảo eslint-config-xo-react .

Nếu bạn tạo dự án thông qua CLI create- npm run ejectreact -app, Bạn có thể và chỉnh sửa trường "eslintConfig" của package.json, như sau:

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

eslint sẽ bị đóng cửa