D
D
Dimionus2018-08-29 11:57:21
Documentation
Dimionus, 2018-08-29 11:57:21

How to properly comment Vue code?

For example, there is a code:

...
props: {
  items: {
    validator(items) {
      function isValid() {
        if (Array.isArray(items) !== true) return false;
        return items.every((item) => {
          if (typeof item !== 'object' || item.constructor !== Object) return false;
          if (typeof item.id !== 'string') return false;
          if (typeof item.title !== 'string') return false;
          if (typeof item.sub !== 'object' || item.sub.constructor !== Object) return true;
          return isValid(item.sub);
        });
      }
      
      return isValid(items);
    },
    required: false,
  },
},
...

I can't figure out how the validator for items and the items itself can be documented so that the correct documentation can be generated via jsdoc\jsdoc-vuejs and pass the eslint-plugin-jsdoc linter checks.
I guess it should be something like this:
/**
 * @param {object[]} items
 * @param {string} items[].id
 * @param {string} items[].name
 * @param {object[]} items[].sub
 * @param {string} items[].sub[].id
 * @param {string} items[].sub[].name
 */

But jsdoc doesn't see this construct at all
UPD
When commenting with arguments from jsdoc-vuejs plugin
/**
 * @vue-prop {object[]} items
 * @vue-prop {string} items[].id
 * @vue-prop {string} items[].name
 * @vue-prop {object[]} items[].sub
 * @vue-prop {string} items[].sub[].id
 * @vue-prop {string} items[].sub[].name
 */

In the generated dock, the items prop is not collected into an object, but is displayed separately by each line
. For jsdoc, I use the minami template

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Taratin, 2018-08-29
@Taraflex

Use typescript + https://github.com/vuejs/vue-class-component
Out of the box with typing and documentation in vue is sad.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question