ReactJS Eslint：在 class 组件上误报缺少 JSDoc @return

Question

我将 eslint 与项目的 google 样式指南一起使用，但无论 jsdoc 是否包含 @return 或，它都会为 class 组件抛出 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 return 错误仅应针对其 jsdoc 未提及 return 的功能组件抛出。这是一个 class 组件。但是，如果我们顺其自然并添加 return，这就是我们得到的：

...

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) 为什么 class 组件会抛出这些错误，以及 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 and 可能的解决方案。但是，我的情况有所不同，因为我没有使用打字稿，也没有使用 @typescript-eslint/parser 作为解析器。我尝试使用 babel-eslint 作为解析器，但我得到了相同的结果。

Answer 1

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

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 子句解决了问题。

本质上，当它为 class 组件抛出 JSDoc return warning/error 时，它内部的方法可能有问题文档。不一定是class组件本身的文档有问题。

ReactJS Eslint：在 class 组件上误报缺少 JSDoc @return

ReactJS Eslint: False Positive Missing JSDoc @return on class components

reactjs

eslint