JSDoc Template

Remember the great God said, try not to comment, except JsDoc. JsDoc can help you quickly generate Api documentation using JsDoc’s annotation style. Like the Lodash document.

JsDoc allows developers to develop a good annotation style and allows you to annotate and document simultaneously.

  • Official document/English
  • Chinese reference
  • github

MyJsDoc template preview

The API document style is primarily based on the jsDoc Template, of which myJsDoc is a derivative. All styles, including code style, are customizable.

  • The overall style

  • Markdown style (lot)

JsDoc installation

 npm install -g jsdoc
Copy the code

Create jsdoc.json in the root directory to configure the generation rules as follows (see myJsDoc for details)

"Include ": [" SRC /"], "includePattern": ".js$"}, "opts": {"destination": // Document template": ", // document template": "package": "package.json", "recurse": True, "tutorials": "docs/tutorials", // generate tutorial content "encoding": "utf8"}, "templates": { }, "plugins": ["plugins/markdown"], "markdown": { "tags": ["example"], "idInHeadings": true } }Copy the code

MyJsDoc template configuration item

{
    "templates": {
      "default": { // Custom specifies the directory to add to styles
        "staticFiles": {
            "include": [
                 "./static"]}},"css": [
        "styles/style.css" // Custom style]."name": "Doc Template".// Document name
      "tabNames": {// Navigation name
          "tutorials":"wiki"."apiName":"api"}}}Copy the code

How do I customize styles

Make sure the project runs properly first

git clone https://github.com/leer0911/myJsdoc.git
cd myJsDoc
npm i
npm run serve
Copy the code

Here, the serve mission does three main things

  • Listen to the SCSS file, compile it into CSS and store it in the static directory
  • Listen for JSDOC related files
  • Trigger gulp-Jsdoc to generate the document

All resources related to the template are in the static directory

  • TMPL directorylayout.tmplModify the layout
  • publish.jsModify the data passed in by JSDoc, including nav information, comment information, etc
  • SCSS directory modification style

After running Demo, find the above main files for real-time custom modification

reference

The code style

Jsdoc common tags

tui jsdoc