JavaScript Comment Snippet (Visual Studio Code)

中文.

Quickly generate JavaScript/TypeScript comments according to JSDoc, ESDoc and TSDoc rules, and use @ to trigger to reduce the burden of memory.

Generate comments statically, not responsive. For parameter functions or variables of existing types, it is recommended to use the built-in /** to trigger.

Settings

If that doesn't work, you may need to configure the editor.

Ctrl + Shift + P / ⇧ + ⌘ + P → Preferences: Open Settings (JSON)

  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": false
  },

Snippets

• Comment Blocks
• Common
• Type Syntax
• Function
• Class
• Misc

Instructions with single, without triggering ///, will generate a complete comment fragment.

Comment Blocks

Generate a comment fragment triggered by ///:

/// →

/**
 * description
 */

Then use the following categories to add specific annotation content.

Type Syntax

For Param

| prefix | body | |-----------------------------------------|------------------------------------------------------| | @param → | @param {TYPE} param - description | | @param.property → | @param {?TYPE} param.name - description | | @param.any / @paa → | @param {*} param - description | |@param.object/@pao/@ppo→ |@param {Object} param - description | |@param.array/@paar/@ppar→ |@param {Object[]} param - description | |@param.string/@pas/@pps→ |@param {string} param - description | |@param.number/@panu/@ppn→ |@param {number} param - description | |@param.boolean/@pab/@ppb→ |@param {boolean} param - description | |@param.Function/@paf/@ppf→ |@param {Function} param - description | |@param.DOMElement/@pad/@ppd→ |@param {DOMElement} param - description | |@param.Node/@pan/@ppnode→ |@param {Node} param - description | |@param.NodeList/@panl/@ppnl→ |@param {NodeList} param - description | |@param.RegExp/@pare/@ppre→ |@param {RegExp} param - description | |@param.generics/@pag/@ppg→ |@param {GenericIdentity} param - description` |

For Member And Variable

Example:

class MyClass {
  constructor() {
    /**
     * @type {number}
     */
    this.foo = 123;

    /**
     * @type {Object}
     * @property {number} p.foo
     * @property {string} p.bar
     */
    this.bar = { foo: 123, bar: 'abc' };
  }

  /** @type {string} */
  get baz() {}

  /** @type {string} */
  set baz(v) {}

  /**
   * @param {number} param - this is p description.
   * @return {Object} this is description.
   * @property {number} foo this is description.
   * @property {number} bar this is description.
   */
  qux(param) {}
}

For Virtual Type

Example:

/**
 * A number, or a string containing a number.
 * @typedef {(number|string)} NumberLike
 */

/**
 * Set the magic number.
 * @param {NumberLike} x - The magic number.
 */
function setMagicNumber(x) { }

Function

Example:

/**
 * function description
 * @param {Object} param - this is object param.
 * @param {number} param.foo - this is property param.
 * @param {string} param.bar - this is property param.
 */
function myFunc(param) {}

/**
 * function description
 * @param {{foo: number, bar: string}} param - this is object param.
 */
function myFunc(param) {}

/**
 * function description
 * @param {{foo: ?number, bar: string}} param - this is nullable property.
 */
function myFunc(param) {}

/**
 * function description
 * @param {{foo: number, bar: string}} param - this is object destructuring..
 */
function myFunc({ foo, bar }) {}

/**
 * @param {number} [param] - this is optional param.
 * @param {number} [param=10] - this is default param.
 * @param {?number} param - this is nullable param.
 * @param {!Object} param - this is not nullable param.
 * @param {?(number|string)} param - this is nullable and union param.
 * @param {function(foo: number, bar: string): boolean} param - this is function param.
 * @param {Array<string>} param - this is Array param.
 * @param {Map<number, string>} param - this is Map param.
 */
function myFunc(param) {}

Class

Common

• @access
• @deprecated
• @desc
• @example
• @experimental
• @ignore
• @link → {@link <identifier>}
• @see → @see <URL>
• @note
• @since → @since MAJOR.MINOR.PATCH
• @todo → @todo description
• @version → @version MAJOR.MINOR.PATCH
• @internal
• @license

Misc

• @external
• @module

Resources

• JSDoc - Github/https://jsdoc.app/
• ESDoc - Github/https://esdoc.org/
• TSDoc - Github/https://tsdoc.org/

@param/@property Syntax

License

MIT License