ESLint з React видає помилки "no-unused-vars"


86

Я налаштував eslint& eslint-plugin-react.

Коли я запускаю ESLint, лінтер повертає no-unused-varsпомилки для кожного компонента React.

Я припускаю, що це не визнає, що я використовую синтаксис JSX або React. Будь-які ідеї?

Приклад:

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

Ви імпортуєте React, не використовуючи його, ви просто використовуєте Component, що правильно імпортували.
GMaiolo

Це має сенс - але чому Headerтакож буде помилка? (Насправді вам потрібно імпортувати React, інакше, коли JSX буде транспільовано, це дасть помилку)
Дон П

На сьогодні це не повинно відбуватися. Яка ваша версія eslint? github.com/eslint/eslint/issues/1905
daniloprates 01

Відповіді:


175

У свій .eslintrc.json, під extends, включіть такий плагін:

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

Джерело


1
Чудова відповідь. Звичайно, вам слід зробити перше (npm install --save-dev eslint-plugin-
response

Що робити, якщо ви використовуєте airbnb? Я намагався додати 'плагін: реагувати / рекомендувати' раніше, але це не спрацьовувало. Розширюється: ["плагін: реагувати / рекомендувати", "airbnb", "airbnb / хуки", "плагін: реагувати / зменшити / рекомендувати", "плагін : красивіше / рекомендовано "," красивіше / реагувати ",],
jonny-harte

Ось авторитетна документація ... github.com/yannickcr/eslint-plugin-react#reкомендовано
Кен Лін,

58

Щоб вирішити цю єдину проблему без додавання нових правил з 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" 
}

14

Оскільки я знайшов це під час гуглиння, ви повинні знати, що цього простого правила достатньо, щоб запобігти появі цього повідомлення:

react/jsx-uses-react

react/recommendedНабір правил додає багато інших правил , ви не можете хотіти.


7

У моєму випадку мені потрібно було додати до вас .eslintrc.js:

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

плюс конкретна настройка, щоб позбутися попереднього імпорту: import { h } from 'preact'але ви можете скористатися цим прикладом, щоб позбутися ваших конкретних попереджень ось так:

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

1

Найшвидше виправлення

Щоб ігнорувати всі змінні TitleCase, додайте це до конфігурації ESLint:

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

Правильне виправлення

Використовуйте eslint-plugin-response, щоб ігнорувати змінні React.

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-config-xo-response .


-1

Якщо ви створюєте проект за допомогою CLI create-response-app, ви можете npm run ejectредагувати поле "eslintConfig" package.json, наприклад:

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

еслінт буде закритий

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.