ReactJS Eslint：误报缺少 JSDoc @return 类组件

Question

我将 eslint 与 google 样式指南一起用于一个项目，但无论 jsdoc 是否包含 @return 或根本没有保证，它都会为类组件引发 jsdoc 错误。

下面会抛出这个错误：

...

112. /**
113.  * DashboardBanner is the top bar of the body.
114.  */
115. class DashboardBanner extends React.Component {
116.   /**
117.    * Caption for the constructor
118.    * @param {type} caption here
119.    */
120.   constructor(props) {
121.     super(props);
122.     this.state = {

...

173.   /**
174.    * @return {html} Title of app and nav btns.
175.    */
176.   render() {
177.     return (
    ...
226.     );
227.   }
228. }

Line 112:1: Missing JSDoc @return for function                     valid-jsdoc

根据this source，jsdoc 返回错误应该只针对 jsdocs 未提及返回的功能组件抛出。这是一个类组件。然而，如果我们幽默并加上回报，这就是我们得到的：

...

112. /**
113.  * DashboardBanner is the top bar of the body.
114.  * @return {type} caption here
115.  */
116. class DashboardBanner extends React.Component {
117.   /**
118.    * Caption for the constructor
119.    * @param {type} caption here
120.    */
121.   constructor(props) {
122.     super(props);
123.     this.state = {

...

Line 114:4: Unexpected @return tag; function has no return statement  valid-jsdoc

我需要知道 a) 为什么会为类组件抛出这些错误，以及 b) 如何摆脱它们。是我的代码、eslint 配置、版本等吗？这是我的.eslintrc.js 文件：

module.exports = {
  'env': {
    'browser': true,
    'es6': true,
  },
  'extends': 'google',
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly',
  },
  'parserOptions': {
    'sourceType': 'module',
    'ecmaFeatures': {
      'jsx': true,
    },
    'ecmaVersion': 2019,
  },
  'plugins': [
    'react',
  ],
  'rules': {
    'max-len': 1,
    'spaced-comment': 1,
    'camelcase': 1,
    'comma-dangle': 1,
    'object-curly-spacing': 1,
    'new-cap': 1,
    'no-invalid-this': 1,
    'quotes': 1,
    'valid-jsdoc': 1,
    'padded-blocks': 1,
    'no-trailing-spaces': 1,
    'prefer-const': 1,
    'no-var': 1,
    'no-unused-vars': 1,
    'semi': 1,
    'indent': 1,
    'keyword-spacing': 1,
    'no-multiple-empty-lines': 1,
    'brace-style': 1,
    'require-jsdoc': 1,
    'comma-spacing': 1,
    'arrow-parens': 1,
    'no-tabs': 1,
    'no-mixed-spaces-and-tabs': 1,
    'curly': 1,
    'space-before-function-paren': 1,
    'eol-last': 1,
    'linebreak-style': 0,
  },
};

我的安装：

    "react": "^16.12.0",
    "eslint": "^7.28.0",
    "eslint-config-google": "^0.13.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.4.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",

我就可能的解决方案咨询了this question 和this question。但是，我的情况有所不同，因为我没有使用打字稿，也没有使用 @typescript-eslint/parser 作为解析器。我尝试使用babel-eslint 作为解析器，但得到了相同的结果。

Answer 1

事实证明，eslint 警告中列出的行非常具有误导性。它实际上有一个方法in 类的问题，而不是类组件本身。它指向父类组件，而不是导致问题的方法。

eslint 警告指出的行取决于现有文档。如果我们有一个根本没有记录的方法......

112. /**
113.  * DashboardBanner is the top bar of the body.
114.  */
115. class DashboardBanner extends React.Component {
116.
117.   doSomething = () => { // no documentation
118.     return ...

它会在line 112 处发出警告。但是，如果我们在方法上方有文档的开头...

112. /**
113.  * DashboardBanner is the top bar of the body.
114.  */
115. class DashboardBanner extends React.Component {
116.
117.   /**
118.    * Beginnings of documentation...
119.    */
120.   doSomething = () => {
121.     return ...

...它在line 117 上引发警告。在方法上方添加@return 子句解决了这个问题。

本质上，当它为类组件抛出 JSDoc 返回警告/错误时，可能是其中的方法有问题，文档不足。不一定有问题类组件本身的文档。