Prettier plugin for format comment blocks and convert to standard Match with Visual studio and other IDE which support jsdoc and comments as markdown.
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.
- Install and configure Prettier as usual
- Install prettier-plugin-jsdoc
npm i prettier-plugin-jsdoc --save
yarn add prettier-plugin-jsdoc
Set prettier-plugin-jsdoc to your plugins list.
.prettierrc
{
"plugins": ["prettier-plugin-jsdoc"],
};If you want ignore some type of files remove "prettier-plugin-jsdoc" from plugins or add empty plugins
module.exports = {
"plugins": ["prettier-plugin-jsdoc"]
overrides: [
{
files: '*.tsx',
options: {
"plugins": []
},
},
],
};To ignore prettier use /* */ or // instead of /** */
/**
* @param { string } param0 description
*/
function fun(param0) {}Format to
/** @param {string} param0 Description */
function fun(param0) {}/**
* @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>;
});/**
@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
*/Add code to example tag
/**
* @examples
* var one= 5
* var two=10
*
* if(one > 2) { two += one }
*/to
/**
* @example
* var one = 5;
* var two = 10;
*
* if (one > 2) {
* two += one;
* }
*/Description is formatting as Markdown, so you could use any features of Markdown on that. Like code tags ("```js"), header tags like "# AHeader" or other markdown features.
| Key | type | Default | description |
|---|---|---|---|
| jsdocSpaces | Number | 1 | |
| jsdocDescriptionWithDot | Boolean | false | |
| jsdocDescriptionTag | Boolean | false | |
| jsdocVerticalAlignment | Boolean | false | |
| jsdocKeepUnParseAbleExampleIndent | Boolean | false | |
| jsdocSingleLineComment | Boolean | true | |
| jsdocSeparateReturnsFromParam | Boolean | fales | Add an space between last @param and @returns |
| tsdoc | Boolean | false | |
| jsdocPrintWidth | Number | undefined | If You don't set value to jsdocPrintWidth, the printWidth will be use as jsdocPrintWidth. |
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
Install eslint-plugin-prettier
$ yarn add eslint eslint-plugin-prettier
Then, in your .eslintrc.json:
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}We hope to support whole tsdoc, if we missed somethings please create an issue.
{
"tsdoc": true
};1- Get a clone/fork of repo
2- Install yarn
3- Add your changes
4- Add a test to your change if needed
5- Create PR
This project extended from @gum3n worked project on GitLab.