prettier-plugin-jsdoc

Prettier plugin for format jsdoc and convert to standard Match with Visual studio and other IDE which support jsdoc.

Many good examples of how this plugin work, are in tests directory. Compare tests and their snapshot

configured with best practices of jsDoc style guides

initial source code (https://gitlab.com/gumen/prettier-plugin-jsdoc)

Installation

Install and configure Prettier as usual
Install prettier-plugin-jsdoc

npm i prettier-plugin-jsdoc --save

yarn add prettier-plugin-jsdoc

add a parser override to your prettier file for js files

{
  //any other config you have
  "plugins": ["jsdoc-parser"], // format all javascript and typescript files
};

or add plugins override to your prettier file for js files

module.exports = {
  // any other config you have
  overrides: [
    {
      files: '*.js',
      options: {
        plugins: ['jsdoc-parser'],
      },
    },
  ],
};

avoid setting the parser value on the root of your config file, it will disable prettier's default behavior and will not parse non-js files

Examples

Single line

/**
 * @param {  string   }    param0 description
 */
function fun(param0) {}

Format to

/** @param {string} param0 Description */
function fun(param0) {}

React Component

/**
 * @type {React.FC<{   message:string}   >}
 */
const Component = memo(({ message }) => {
  return <p>{message}</p>;
});

Format to

/** @type {React.FC<{message: string}>} */
const Component = memo(({ message }) => {
  return <p>{message}</p>;
});

Typescript Objects

/**
 @typedef {
    {
        "userId": {
        "profileImageLink": *,
        "isBusinessUser": "isResellerUser"|"isBoolean"|  "isSubUser" |    "isNot",
        "shareCode": number,
        "referredBy": any,
        },
        id:number
      }
     } User
     */

Format to

/**
 * @typedef {{
 *   userId: {
 *     profileImageLink: any;
 *     isBusinessUser: "isResellerUser" | "isBoolean" | "isSubUser" | "isNot";
 *     shareCode: number;
 *     referredBy: any;
 *   };
 *   id: number;
 * }} User
 */

Example

Add code to example tag

/**
 * @examples
 *   var one= 5
 *   var two=10
 *
 *   if(one > 2) { two += one }
 */

/**
 * @example
 *   var one = 5;
 *   var two = 10;
 *
 *   if (one > 2) {
 *     two += one;
 *   }
 */

Description

/**
 * This format of the description is being supported now:
 *
 *    1. Thing 1
 *    2. Thing 2
 *    3. Thing 3
 */

Options

Key	type	Default
jsdocSpaces	Number	1
jsdocDescriptionWithDot	Boolean	false
jsdocDescriptionTag	Boolean	false
jsdocVerticalAlignment	Boolean	false
jsdocKeepUnParseAbleExampleIndent	Boolean	true

Full up to date list and description of options can be found in Prettier help. First install plugin then run Prettier with "--help" option.

$ prettier --help # global installation

$ ./node_modules/.bin/prettier --help # local installation

Links

Prettier

JSDoc

Current Tags

1.3.0 ... latest (a year ago)
0.2.0-rc4 ... next (4 years ago)

prettier-plugin-jsdoc

TOC

Installation

Examples

Single line

React Component

Typescript Objects

Example

Description

Options

Links

Current Tags

99 Versions