为React组件中未使用的类方法设置eslint规则

Question

我正在尝试为从未使用过的类中的方法设置一个拖延规则。像下面的react组件一样，我有一个从未使用过的方法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
    }
}

Answer 1

此插件可以满足您的要求。但是请注意。

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

在“插件”部分的eslint配置中添加“ no-unused-react-component-methods”：）>

{
    "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
  }
}
现在，它应该突出显示任何看似未使用的功能！让我知道它是否有效。