WebStorm中自定义函数如何实现路径提示与跳转功能

你想要实现的自定义函数路径自动提示、按住快捷键点击跳转效果，按以下步骤配置即可：

步骤1：配置路径别名识别 #

如果项目中使用了自定义路径别名（比如@/指代项目根目录下的src/文件夹），需要先让WebStorm识别别名映射规则：

• 在项目根目录新建jsconfig.json（TS项目用tsconfig.json），写入如下配置示例，按你自己项目的别名规则调整即可：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"]
    }
  },
  "exclude": ["node_modules"]
}

• 保存文件后WebStorm会自动读取配置，完成别名的识别。

步骤2：让WebStorm识别自定义函数的路径参数 #

要让自定义函数的入参被识别为文件路径，只需给函数添加对应的JSDoc注释即可，示例如下：

/**
 * 自定义资源加载函数
 * @param filePath {string} 资源文件的相对/绝对路径
 * @return {Promise<*>}
 */
function customLoad(filePath) {
  return import(filePath)
}

如果是全局挂载的自定义函数（比如挂载在Vue原型上的全局方法），需要额外把全局函数的类型声明文件，添加到WebStorm的配置中：路径为File > Settings > Languages & Frameworks > JavaScript > Libraries，添加你自定义的类型声明文件即可。

步骤3：效果验证 #

配置完成后，按住*Ctrl*（Mac系统按住*Command*）悬停在函数的路径参数上，出现下划线后点击即可直接跳转到对应文件，输入路径时也会自动弹出目录、文件的提示选项。

效果演示 #

内容的提问来源于stack exchange，提问作者rexSurprise