如何通过JSDoc让VSCode识别函数参数对应模块 实现自动补全与跳转

完全可以实现，无需额外转译、无需安装第三方插件，VSCode 内置的 JavaScript 语言服务原生支持该能力，你只需要把 JSDoc 里的模块引用语法调整为 import() 写法即可。

正确写法示例 #

把你原有代码中的 @param 注解做如下修改即可生效：

/**
 * 服务工厂
 *
 * @param {import('./data-access/mongodb-adapter.js')} database   应用数据库适配器
 */
function makeService(database) {
    // 这里输入 database. 就会自动弹出 find 等方法的补全提示
    // 按住 cmd 点击 database 或 database.find 可以直接跳转到对应模块的定义
    return {
        find: query => database.find(query)
    }
}

module.exports = makeService

不同导出场景的适配 #

• 如果你的适配器文件是命名导出（比如 module.exports = { MongodbAdapter }），需要指定对应导出成员：

  @param {import('./data-access/mongodb-adapter.js').MongodbAdapter} database
  

• 如果你的适配器文件是 ES 模块规范的默认导出（比如 export default class MongodbAdapter {}），需要加上 .default 取默认导出的类型：

  @param {import('./data-access/mongodb-adapter.js').default} database
  

同作用域变量的类型提示 #

和 PHPDoc 的 /* @var $type $var */ 用法对应，JS 里可以用如下写法为任意变量指定类型：

// 直接在变量上方加 JSDoc 注解即可
/** @type {import('./data-access/mongodb-adapter.js')} */
const database = getDbInstance()

注意事项 #

• 注解里的路径规则和 require()/import 完全一致，是相对于当前文件的相对路径
• 不需要开启额外的类型检查配置，VSCode 默认就支持该补全、跳转能力
• 如果项目里有路径别名，你可以在根目录新增 jsconfig.json 配置别名映射，即可在 import() 里直接用别名写路径

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