一、啟用方法1

在函數(shù)附近輸入/** 并按回車鍵

image.png

添加函數(shù)說明、參數(shù)類型和說明及返回值類型和說明

image.png

二、啟用方法2

按下快捷鍵 ctrl+shift+A ,在彈出的輸入框中輸入Fix Doc Comment， 選中Fix Doc Comment并回車即可；

三、查看含義方法

在對應的函數(shù)或參數(shù)上點擊ctrl+Q 即可；

image.png

四、生成文檔方法

1、全局安裝jsdoc
npm install jsdoc -g
2、運行 jsdoc 你的js文件.js
如index.js內容為

/**
 * 獲取url中的參數(shù)
 * @param name {string} url地址
 * @return {string}
 */
function getSearchParam(name) {
  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
  const r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURIComponent(r[2])
  }
  return ''
}
export default getSearchParam

運行jsdoc index.js,其會在index.js的目錄下生成out文件夾及相應的文件

image.png

3、查看效果

image.png

image.png

image.png

image.png

documentation.js的缺點1、看源碼需要到github，不像jsdoc可以直接看源碼并可以直接定位至某一行數(shù) 2、界面較丑；

4、當然jsdoc還有很多其他功能及可配置項

https://juejin.cn/post/6844904160274415623

五、JSDoc文檔

1、官方
https://jsdoc.app/
2、中文
https://jsdoc.zcopy.site/
http://shouce.jb51.net/jsdoc/index.html

六、WebStorm其他插件推薦

1、預運行插件 quokkajs
https://medium.com/@wallabyjs/quokka-live-javascript-scratchpad-for-jetbrains-ides-free-developer-tool-569590ab7a05
https://plugins.jetbrains.com/plugin/9667-quokka
2、代碼檢測插件 sonarlint
https://www.sonarlint.org/intellij
https://plugins.jetbrains.com/plugin/7973-sonarlint

3、縮寫功能

image.png

image.png

image.png

b、Codota （AI代碼聯(lián)想工具-- 跟github最近推出的Copilot 有點點類似，但又不同）

image.png

亞馬遜新出的類似工具 CodeWhisperer

c、Rainbow Brackets 括號匹配對應顏色及代碼塊著色 https://zhuanlan.zhihu.com/p/94917594

image.png

d、CodeGlance 右側代碼縮略圖 https://blog.csdn.net/ju_362204801/article/details/105504544

image.png