Member-only story

How to generate JSDoc documentation for a TypeScript React project

Tom Smykowski
2 min readSep 23, 2021

--

  1. First, ignore docs folder, if you don’t want docs to be in the repository by adding:
/docs to .gitignore file

2. Create a file called jsdoc.conf.json with this content:

{
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc", "closure"]
},
"source": {
"include": ["src"],
"includePattern": "\\.(jsx|js|ts|tsx)$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": ["plugins/markdown", "better-docs/component", "better-docs/typescript"],
"templates": {
"better-docs": {
"name": "Your App Name"
}
},
"opts": {
"destination": "docs",
"recurse": true,
"readme": "README.md"
}
}

3. Install two fancy packages:

yarn add --dev better-docs
yarn add --dev jsdoc

or:

npm install --save-dev better-docs
npm install --save-dev jsdoc

4. Add a script to generate docs:

Into scripts section of package.json file add:

"docs": "jsdoc -c jsdoc.conf.json"

5. If you use Tslint, ignore docs from validation:

"linterOptions": {
"exclude": [
...
"docs"
]
},

6. Mark everything you want to be in the documentation with at least an empty jsdoc tag:

/**
*
*/
export…

--

--

Tom Smykowski
Tom Smykowski

Written by Tom Smykowski

🚀 Senior/Lead Frontend Engineer | Angular · Vue.js · React | Design Systems, UI/UX | Looking for a new project! 📩 contact@tomasz-smykowski.com

Responses (2)