JSDoc Documentation

website·Indexed 30 days ago

https://jsdoc3.vercel.app/

Documentation for JSDoc, focusing on the tag dictionary and syntax for documenting JavaScript code. Includes detailed guides on tags such as @typedef, @type, @param, @returns, @module, and @class, as well as instructions for documenting CommonJS and AMD modules.

Tokens
27.7K
Snippets
199
Records
225
Agent score
75%

What's inside JSDoc

  1. Use synonyms for the @file tag

    The following tags are synonyms for @file and can be used interchangeably to provide a file-level description: @fileoverview and @overview.
  2. Document copyright information using the @copyright tag

    The @copyright tag is used to specify copyright information within a file overview comment. It is intended to be used in combination with the @file tag to provide a complete header for the source file.
    /**
     * @file This is my cool script.
     * @copyright Michael Mathews 2011
     */
  3. Provide a concise description using the @summary tag

    The @summary tag allows you to provide a short, concise version of a doclet's description. This is useful when the main description is long or verbose, as it provides a quick overview of the entity's purpose. The @summary tag can be added to any doclet.
    /**
     * A very long, verbose, wordy, long-winded, tedious, verbacious, tautological,
     * profuse, expansive, enthusiastic, redundant, flowery, eloquent, articulate,
     * loquacious, garrulous, chatty, extended, babbling description.
     * @summary A concise summary.
     */
    function bloviate() {}
  4. Document external symbols using the @external tag

    The @external tag identifies a class, namespace, or module defined outside of the current package. This allows you to document extensions to external symbols or provide information about them to users. When referring to an external symbol in other JSDoc tags (like @link or @augments), you must use the external: prefix (e.g., external:Foo), although the prefix is omitted within the @external tag itself.

    Constraint: Only apply the @external tag to the highest-level symbol defined outside your project. For nested symbols, use @memberof external:ParentName instead of applying @external to the child.

    /**
     * The built in string object.
     * @external String
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String|String}
     */
  5. Use JSDoc tags to describe API metadata

    JSDoc tags (starting with @) provide structured information about the code. Common tags include @constructor to identify a class constructor and @param to define method parameters, including their type and description.
    /**
     * Represents a book.
     * @constructor
     * @param {string} title - The title of the book.
     * @param {string} author - The author of the book.
     */
    function Book(title, author) {}
  6. JSDoc Block Tags Reference

    JSDoc uses block tags (starting with @) to provide structured metadata about JavaScript code. Common tags include:

    • Function/Class Metadata: @class (constructor), @function (method), @async (asynchronous function), @generator (generator function), @returns (return value), @param (function parameter), @throws (errors thrown).
    • Access & Visibility: @public, @private, @protected, @package (package-private), @ignore (omit from docs).
    • Inheritance & Relationships: @augments (inherits from), @implements (implements interface), @inheritdoc (inherit parent docs), @override (overrides parent).
    • Types & Definitions: @typedef (custom type), @type (object type), @enum (related properties), @interface (interface definition).
    • General Documentation: @description (detailed description), @summary (short description), @example (usage example), @since (version added), @deprecated (no longer preferred), @author (author identity), @license (license info).
    • Organization: @module (JS module), @namespace (namespace object), @file (file overview), @memberof (parent symbol).
  7. Use JSDoc block tags for detailed code documentation

    Block tags are used at the top level of a JSDoc comment to provide detailed information about code, such as function parameters. Block tags always begin with an at sign (@) and must be followed by a line break, except when the tag is the final element in the JSDoc comment.
    /**
     * Set the color and type of the shoelaces.
     *
     * @param {LACE_COLORS} color - The shoelace color.
     * @param {LACE_TYPES} type - The type of shoelace.
     */
    Shoe.prototype.setLaceType = function (color, type) {
      // ...
    }
  8. Add captions to JSDoc examples

    To add a descriptive caption to an example, place a <caption></caption> element immediately after the @example tag. This allows you to label specific examples within a doclet.
    /**
     * Solves equations of the form a * x = b
     * @example <caption>Example usage of method1.</caption>
     * // returns 2
     * globalNS.method1(5, 10);
     * @returns {Number} Returns the value of x for the equation.
     */
    globalNS.method1 = function (a, b) {
      return b / a
    }
  9. Include a README file in JSDoc documentation

    JSDoc allows you to incorporate a Markdown README file to serve as the home page (index.html) of your generated documentation. There are two methods to achieve this:

    1. Via Source Paths: Include the path to a file named README.md directly in the list of source paths passed to the JSDoc CLI. JSDoc will use the first README.md it encounters.
    2. Via CLI Option: Use the -R or --readme flag to specify a path to a README file. This file can have any name or extension, provided it is in Markdown format. This method takes precedence over any README.md files found in source paths.

    This functionality is available in JSDoc 3.3.0 and later when using the default template.

    # Method 1: Including README.md in source paths
    jsdoc path/to/js path/to/readme/README.md
    
    # Method 2: Using the --readme option (takes precedence)
    jsdoc --readme path/to/readme/README path/to/js
  10. Identify CommonJS and Node.js modules in JSDoc

    To document a CommonJS or Node.js module, use the @module tag in a standalone JSDoc comment. The value of the tag should be the module identifier used in the require() function. If the tag is used without a value, JSDoc attempts to guess the identifier based on the file path. When referencing a module from another comment using a namepath, prefix the identifier with module:. For example, a member of module my/pants would have a longname like module:my/pants.Jeans#hem.
    /**
     * Pants module.
     * @module my/pants
     * @see module:my/shirt
     */
  11. Define and use callback functions with @callback

    The @callback tag is used to document the signature (parameters and return value) of a callback function that can be passed to other functions. Once defined, the callback's name acts as a custom type, allowing you to reference it in the @param tag of other functions to indicate that a parameter must be a function of that specific signature. You can use any tags typically associated with @method to further describe the callback.
    /**
     * This callback is defined as a global type.
     * @callback requestCallback
     * @param {number} responseCode
     * @param {string} responseMessage
     */
    
    /**
     * Send a request.
     * @param {requestCallback} cb - The callback that handles the response.
     */
    Requester.prototype.send = function (cb) {
      // code
    };
  12. Document class instance members with @memberof

    To document a symbol as an instance member of a class, use one of the following three patterns:

    1. Use @memberof ClassName.prototype
    2. Use @memberof ClassName#
    3. Use @memberof ClassName in combination with the @instance tag.
    /** @class Observable */
    create('Observable', {
      /** @memberof Observable.prototype */
      publish: function (msg) {},
    
      /** @memberof Observable# */
      save: function () {},
    
      /**
       * @memberof Observable
       * @instance
       */
      end: function () {},
    })