Установите правило eslint для неиспользуемых методов класса в компоненте React

Я пытаюсь установить правило eslint для методов в классе, которые никогда не используются. Как и в следующем компоненте реакции, у меня есть метод unUsedMethod, который никогда не используется, но eslint не показывает для него ошибку.

class Sample extends Component {
    unUsedMethod() {
        console.log('I am never used');
    }
    render() {
        return 'Hello!';
    }
}

Мой файл eslint выглядит так

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true,
            "sourceType": "module",
            "allowImportExportEverywhere": false,
            "codeFrame": false
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [2, 4, {"SwitchCase": 1, "ObjectExpression": "first"}],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "semi": [
            "error",
            "always"
        ],
        "react/display-name": 0,
        "react/prop-types": 0, // Temporary
        "react/no-unescaped-entities": 0,
        "no-trailing-spaces": 1
    }
}

reactjs eslint es6-class
person Aman    schedule 05.10.2017    source источник
comment
Я предполагаю, что eslint проверяет только переменные, которые не используются, он не проверяет методы класса.   -  person Kishan Mundha    schedule 05.10.2017
comment
Я еще не пробовал, но npmjs.com /package/ может работать. вам нужно запустить npm install eslint-plugin-no-unused-react-component-methods, чтобы включить его, по-видимому   -  person Coty Embry    schedule 04.06.2018
comment
Я попробовал методы eslint-plugin-no-unused-react-component-methods, но у меня не получилось. Кто-нибудь еще заставил его работать?   -  person Waltari    schedule 11.10.2019
comment
@Waltari Нет. Но если вы начнете использовать React Hooks и перейдете от компонентов на основе классов к функциональным компонентам. Эта проблема становится устаревшей.   -  person Aman    schedule 11.10.2019
comment
Это правда, но у нас есть значительная кодовая база в реагирующих компонентах. Я получил плагин заработал и удалил несколько функций с ним. Не работает для статических функций, что является позором, поэтому я не буду использовать его все время.   -  person Waltari    schedule 11.10.2019
comment
@Waltari Как вы заставили плагин работать?   -  person Utkarsh Agarwal    schedule 05.03.2020
comment
Прости, что не сделал этого раньше. Я разместил ответ.   -  person Waltari    schedule 05.03.2020

Ответы (1)


arrow_upward
3
arrow_downward

Этот плагин делает то, что вы просите. Однако слово предостережения.

https://www.npmjs.com/package/eslint-plugin-no-unused-react-component-methods

В настоящее время невозможно просто иметь синтаксический анализатор, который бы проверял неиспользуемые свойства компонента, потому что свойства компонента могут вызываться динамически.

Например:

class Sample extends Component {
    // Plugin falsely flags this as unused.
    unUsedMethod() {
        console.log('I am used dynamically');
    }
    render() {
        // No way to parse dynamic function calls reliably
        this['unUsedMethod']();
        return 'Hello!';
    }
}

Это также не будет работать с пакетом react-onclickoutside, так как для этого требуется, чтобы функция была прикреплена к компоненту, который вызывается путем обертывания компонента в HOC. https://www.npmjs.com/package/react-onclickoutside

Тем не менее плагин помог мне найти несколько неиспользуемых функций, так что, на мой взгляд, стоит попробовать.

Сначала установите пакет: npm i eslint-plugin-no-unused-react-component-methods --save-dev

Добавьте «no-unused-react-component-methods» в конфигурацию eslint в разделе плагинов:

{
    "plugins": [
        "no-unused-react-component-methods"
    ],
}

И добавить в раздел правил

{
    "rules": {
        "no-unused-react-component-methods/no-unused-react-component-methods": 2,
    }
}

Таким образом, ваша конфигурация будет выглядеть так:

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true,
      "sourceType": "module",
      "allowImportExportEverywhere": false,
      "codeFrame": false
    },
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "no-unused-react-component-methods"
  ],
  "rules": {
    "no-unused-react-component-methods/no-unused-react-component-methods": 2,
    "indent": [2, 4, { "SwitchCase": 1, "ObjectExpression": "first" }],
    "linebreak-style": ["error", "unix"],
    "semi": ["error", "always"],
    "react/display-name": 0,
    "react/prop-types": 0, // Temporary
    "react/no-unescaped-entities": 0,
    "no-trailing-spaces": 1
  }
}

Теперь он должен выделять любые, казалось бы, неиспользуемые функции! Дайте мне знать, если это работает или нет.

person Waltari    schedule 05.03.2020
comment
Потрясающий! Теперь это работает. Я пропустил правильный текст правила. Спасибо. - person Utkarsh Agarwal; 05.03.2020