'How to document LWC Salesforce components public variables with JSDoc?

JSDoc skips my public LWC variables. Here is an example:

    /**
     * SomePublicVarName mode - default is false.
     * 
     * @type {boolean}
     */
    @api 
    somePublicVarName = false;

If I convert that to a function or a public getter/setter, then I can see it in the output. Is there a way around that? Can I change JSDoc parsing behavior? I read in the docs I can use a configuration file, but I don't know if this is a use case for it. I also tried to add the @public JSDoc property hopping that would fix the issue, but it didn't help.

Solution 1:^[1]

My issue was resolved by also adding a js doc on top of the class declaration itself. In this js doc I used @alias.

See this post: https://salesforce.stackexchange.com/questions/370416/how-to-document-lwc-salesforce-components-public-variables-with-jsdoc

Solution 2:^[2]

Proper use of JSDoc comments in LWC

You need to take care of the correct class documentation in order for this to work. For example, a correctly annotated Hello World LWC could look like this:

import { api, LightningElement } from 'lwc';

/**
 * An example LWC that adds a classic greeting to any page.
 * @alias HelloWorld
 * @extends LightningElement
 * @hideconstructor
 *
 * @example
 * <c-hello-world name="World"></c-hello-world>
 */
export default class HelloWorld extends LightningElement {
  /**
   * Enter the name of the person to greet.
   * @type {string}
   * @default 'World'
   */
  @api name = 'World';
}

Generate LWC code documentation

After you have properly annotated your components as just shown, you can then generate a well-formatted document using jsdoc.app.

To do this, you must first install the appropriate node package, for example globally as follows:

npm install -g jsdoc

Furthermore, a jsdoc.config.json file must be located in the root directory of the project, which may look like the following:

{
  "tags": {
    "allowUnknownTags": true,
    "dictionaries": ["jsdoc", "closure"]
  },
  "source": {
    "include": ["force-app/main/default/lwc"],
    "includePattern": ".+\\.js(doc|x)?$",
    "excludePattern": "(^|\\/|\\\\)_"
  },
  "plugins": [],
  "templates": {
    "cleverLinks": false,
    "monospaceLinks": false
  },
  "opts": {
    "destination": "docs",
    "recurse": true,
    "readme": "README.md"
  }
}

Then the documentation can be generated as follows:

jsdoc -c jsdoc.config.json

Setup guide

I also published a guide on how to use JSDoc for Lightning Web Components with step by step instructions and detailed explanations:

Write and generate LWC code documentation using JSDoc

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Florian G
Solution 2	Sebastiano Vierk

'How to document LWC Salesforce components public variables with JSDoc?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]