WebStorm启用JSDoc方法及WebStorm好用插件推荐

一、启用方法1

在函数附近输入/** 并按回车键

image.png

添加函数说明、参数类型和说明及返回值类型和说明

image.png

二、启用方法2

按下快捷键 ctrl+shift+A ,在弹出的输入框中输入Fix Doc Comment， 选中Fix Doc Comment并回车即可；

三、查看含义方法

在对应的函数或参数上点击ctrl+Q 即可；

image.png

四、生成文档方法

1、全局安装jsdoc
npm install jsdoc -g
2、运行 jsdoc 你的js文件.js
如index.js内容为

/**
 * 获取url中的参数
 * @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

如果觉得难看，可以使用一些比较好的模版，比如 docdash

image.png

或者minami

image.png

或者不使用jsdoc直接使用documentation.js

image.png

documentation.js的缺点1、看源码需要到github，不像jsdoc可以直接看源码并可以直接定位至某一行数 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

4、2021年7月24日推荐
具体可见：https://juejin.cn/post/6987411282274025485，我觉得这里有4个软件强烈推荐---
a、翻译插件：Translation

image.png

image.png

b、Codota （AI代码联想工具-- 跟github最近推出的Copilot 有点点类似，但又不同）

image.png

Codota 的升级版---Tabnine https://www.tabnine.com/blog/codota-is-now-tabnine/
https://www.tabnine.com/install/intellij

亚马逊新出的类似工具 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