CODEWITHSUNDEEP
reactjseslint
ZontarZon
ZontarZon

Reputation: 743

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

I am using eslint with the google style guide for a project, but it throws jsdoc errors for class components regardless of whether or not the jsdoc contains a @return or warrants one at all.

The following will throw this error:

...

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

According to this source, the jsdoc return error should only be thrown for functional components whose jsdocs don't mention the return. This is a class component. However, if we humor it and add the return, this is what we get:

...

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

I need to know a) why these errors are being thrown at all for a class component and b) how to get rid of them. Is it my code, eslint configuration, versions, etc...? Here is my .eslintrc.js file:

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,
  },
};

My installations:

    "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",

I consulted this question and this question regarding possible solutions. However, my situation differs because I'm not using typescript and not using @typescript-eslint/parser as the parser. I attempted to use babel-eslint as the parser, but I got the same results.

Upvotes: 2

Views: 5478

Answers (1)

ZontarZon
ZontarZon

Reputation: 743

So as it turns out, the line listed in the eslint warning was very misleading. It actually had a problem with a method within the class, not the class component itself. It pointed to the parent class component instead of the method causing problems.

The line pointed out by the eslint warning depends on existing documentation. If we have a method that isn't documented at all...

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

It throws the warning at line 112. However, if we have the beginnings of documentation above the method...

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 ...

... it throws the warning on line 117. Adding a @return clause above the method solved the issue.

In essence, when it throws a JSDoc return warning/error for a class component, it likely has a problem with a method inside of it with insufficient documentation. It may not necessarily have problems with the documentation of the class component itself.

Upvotes: 1

Related Questions