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

Question

我正在尝试为类中从未使用过的方法设置 eslint 规则。就像在下面的 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

将“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
  }
}

现在它应该突出显示任何看似未使用的功能！让我知道它是否有效。