VSCode如何实现JSDoc注释建议功能？

功能概述 #

在VSCode里，在函数上方敲/**，编辑器会自动生成带参数、返回值的JSDoc注释模板，这个功能是内置的TypeScript and JavaScript Language Features扩展提供的（禁用它就没这功能了）。

核心源码位置 #

这个功能的核心代码在vscode仓库的extensions/typescript-language-features目录下，关键文件是：

• src/features/jsDocCompletions.ts：负责处理/**触发后的补全逻辑，生成JSDoc模板
• src/typescriptServiceHost.ts：对接TypeScript语言服务，获取函数的参数、返回值等元信息

实现原理 #

1. 触发检测
   扩展通过VSCode的CompletionItemProvider接口注册补全服务，监听JavaScript/TypeScript文件中的/**输入事件，判断光标是否在函数定义上方，满足条件则触发补全。

2. 提取函数信息
   借助TypeScript语言服务的AST解析能力，获取当前光标下方函数的参数列表、参数类型、返回值类型等结构信息。TypeScript语言服务会自动处理代码的类型推断，即使是无类型标注的JavaScript函数也能提取参数名。

3. 生成注释模板
   根据提取到的函数信息，拼接出符合JSDoc规范的注释模板，比如：

   /**
    * @param {string} username - 用户名
    * @param {number} age - 用户年龄
    * @returns {object} 用户信息对象
    */
   

   模板会自动匹配参数数量，预留描述输入位。

4. 插入补全
   将生成的模板封装成CompletionItem，返回给VSCode编辑器，编辑器自动将模板插入到光标位置，还支持通过Tab键快速跳转至各个描述输入区域。

自定义扩展实现思路 #

如果要自己做类似功能，步骤大概是：

• 注册针对目标语言的CompletionItemProvider，设置触发字符为/**
• 用VSCode的语言服务API或者第三方AST解析库（比如babel-eslint、typescript）解析当前代码，提取函数结构信息
• 根据解析结果生成对应的注释模板
• 将模板作为补全项返回，实现自动插入

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