ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

【JSDocvscode】用JSDoc补全类型提示,在vscode里调node与Python并统一走TaoToken

【JSDocvscode】用JSDoc补全类型提示,在vscode里调node与Python并统一走TaoToken 1. 为什么 JS 写起来总像在摸黑从 JSDoc 到多语言调试的真实痛点如果你平时用 vscode 写 JavaScript大概率遇到过这种场景调用一个自己上周写的函数敲完a.之后编辑器毫无反应只能翻回源码一行行看参数到底传几个、返回的是对象还是数组。JavaScript 本身是弱类型语言运行时才确定类型编辑器在没有额外信息时确实没法给你补全。JSDoc 就是解决这个问题的低成本方案——它是一套写在注释里的类型标注语法vscode 内置了对它的解析能力你只要在函数上方敲/**再回车编辑器就会自动生成注释骨架填上param和returns之后调用处的类型提示、参数名、返回值结构全都回来了。但真实开发里光有类型提示还不够。你写完一个 Node 服务总得打断点看请求进来时变量长什么样同时项目里可能还有几个 Python 脚本负责数据处理或模型调用你不想为它们再开一个 PyCharm。于是问题变成能不能在同一个 vscode 窗口里既用 JSDoc 补全 JS 类型又能调试 Node还能直接跑 Python并且这些脚本调用的模型接口统一走同一个 Key 和 API 通道这篇就按这个工作流一步步配。适合已经会写 JS 基础语法、但被类型提示和调试配置卡过的人也适合想把 Python 脚本塞进同一套开发环境的人。2. 前置准备TaoToken 统一 Key 与 API 通道在配 vscode 之前先把模型调用的通道定下来。我试过在多个脚本里分别写不同的接口地址和 Key改起来非常痛苦。TaoToken 的做法是给你一个统一的 API 入口和 KeyNode 脚本和 Python 脚本都指向同一个地址换模型时只改请求体里的模型名不用动 Key。你需要先拿到一个 API Key。打开控制台页面在 API Keys 里创建一个复制出来保存好。这个 Key 后面会同时出现在 Node 的.env和 Python 的环境变量里。控制台入口https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Keys 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewriteAPI 的基础地址是https://taotoken.net/api注意这个地址不带任何查询参数直接作为 base URL 使用。Node 侧可以用 OpenAI 兼容的 SDKPython 侧同样用 openai 包把base_url指过去即可。这样你的 JS 和 Python 共享同一套鉴权不用维护两份配置。注意Key 不要硬编码进源码提交到仓库用.env文件加.gitignore隔离后面配置片段里会体现。3. 可复制配置settings.json、launch.json 与 JSDoc 骨架3.1 JSDoc 类型提示的实际写法先看一个没有 JSDoc 的函数调用时编辑器给不出任何参数信息function createTask(name, priority, tags) { return { name, priority, tags, createdAt: Date.now() }; }在函数上方输入/**然后回车vscode 会自动补出参数占位。补全后写成这样/** * 创建一个任务对象 * param {string} name - 任务名称 * param {number} priority - 优先级1 最高 * param {string[]} tags - 标签列表 * returns {{name: string, priority: number, tags: string[], createdAt: number}} */ function createTask(name, priority, tags) { return { name, priority, tags, createdAt: Date.now() }; }此时你在别处写createTask(的时候编辑器会提示三个参数的类型和含义写const t createTask(...)之后敲t.name、priority、tags、createdAt都会出现在补全列表里。returns里用对象字面量描述结构比只写returns {Object}精确得多嵌套字段也能提示。常用的标签就几个param描述参数returns描述返回值typedef定义可复用的类型type标注变量。比如你有一个配置对象反复出现可以这样定义/** * typedef {Object} ApiConfig * property {string} baseUrl - 接口基础地址 * property {string} apiKey - 鉴权 Key * property {string} model - 模型名称 */ /** type {ApiConfig} */ const config { baseUrl: https://taotoken.net/api, apiKey: process.env.TAOTOKEN_API_KEY, model: gpt-4o-mini };这样config.之后同样有补全拼错字段名会直接标红。3.2 settings.json 骨架在项目根目录建.vscode/settings.json把 Python 解释器路径和 Node 相关设置放进去。解释器路径按你本机实际安装位置改{ python.defaultInterpreterPath: python3, python.terminal.activateEnvironment: true, javascript.suggest.completeFunctionCalls: true, javascript.validate.enable: true, editor.suggest.showJSDocSnippets: true, files.associations: { *.js: javascript } }completeFunctionCalls打开后选中补全项会自动填上括号和参数占位配合 JSDoc 用起来很顺。showJSDocSnippets保证/**触发的注释模板可用。3.3 launch.json 开启 Node 调试点左侧调试图标选择「创建 launch.json」或者直接新建.vscode/launch.json写入{ version: 0.2.0, configurations: [ { type: node, request: launch, name: 调试 Node 服务, program: ${workspaceFolder}/server.js, envFile: ${workspaceFolder}/.env, console: integratedTerminal, skipFiles: [node_internals/**] }, { type: node, request: launch, name: 调试当前 JS 文件, program: ${file}, envFile: ${workspaceFolder}/.env, console: integratedTerminal } ] }envFile指向.env这样process.env.TAOTOKEN_API_KEY在调试时能读到。skipFiles把 Node 内部代码排除在单步之外断点只会停在你自己的业务代码里。3.4 Node 侧调用 TaoToken 的片段建一个server.js用 OpenAI 兼容方式请求require(dotenv).config(); const OpenAI require(openai); const client new OpenAI({ baseURL: https://taotoken.net/api, apiKey: process.env.TAOTOKEN_API_KEY }); /** * 向模型发一条消息 * param {string} content - 用户输入 * returns {Promisestring} 模型回复文本 */ async function ask(content) { const res await client.chat.completions.create({ model: gpt-4o-mini, messages: [{ role: user, content }] }); return res.choices[0].message.content; } ask(用一句话解释 JSDoc).then(console.log);.env文件里写一行TAOTOKEN_API_KEY你的Key3.5 Python 侧走同一通道新建ask.py用同样的 base URL 和 Keyimport os from openai import OpenAI client OpenAI( base_urlhttps://taotoken.net/api, api_keyos.environ.get(TAOTOKEN_API_KEY) ) def ask(content: str) - str: res client.chat.completions.create( modelgpt-4o-mini, messages[{role: user, content: content}] ) return res.choices[0].message.content if __name__ __main__: print(ask(用一句话解释 JSDoc))Python 侧读环境变量可以在 vscode 的settings.json里加terminal.integrated.env.linux: {TAOTOKEN_API_KEY: 你的Key}或者直接在终端export。这样 Node 和 Python 用的是同一个 Key、同一个 API 地址换模型只改model字段。4. 验证请求断点命中与 Python 运行成功4.1 验证 Node 断点在server.js的ask函数里const res await client.chat...这一行左侧点一下出现红点。按CtrlShiftD打开调试视图顶部下拉选「调试 Node 服务」点绿色三角启动。程序会在断点处停住左侧变量面板能看到content的值把鼠标悬停在client上能看到 baseURL 配置。按 F10 单步跳过res出现后展开choices[0].message.content能看到模型返回的文本。终端里最终打印出回复说明请求走通了。4.2 验证 Python 运行打开ask.py确认右下角解释器选的是你安装的 Python。按CtrlF5直接运行或者在终端执行python ask.py。如果终端输出一句关于 JSDoc 的解释说明 Python 侧也成功调用了同一个 API 通道。如果报ModuleNotFoundError: No module named openai在终端执行pip install openai即可。4.3 验证 JSDoc 提示回到server.js在文件末尾新起一行输入ask(编辑器应该弹出参数提示content: string。输入一个字符串后.then(也会提示回调参数类型。如果没提示检查settings.json里javascript.suggest.completeFunctionCalls是否为true以及 JSDoc 注释是否紧贴在函数声明上方、中间没有空行。5. 本篇常见错排查断点不命中程序直接跑完。最常见的原因是launch.json里program路径写错或者你启动的是「调试当前 JS 文件」但当前打开的文件不是入口。检查program是否指向${workspaceFolder}/server.js以及调试下拉框选中的配置名是否对应。process.env.TAOTOKEN_API_KEY是 undefined。说明.env没被加载。确认envFile路径正确且server.js顶部有require(dotenv).config()并且dotenv已安装npm install dotenv。如果不想用 dotenv也可以在launch.json的env字段里直接写键值对。Python 解释器选错运行的是系统自带的老版本。按CtrlShiftP输入Python: Select Interpreter选你实际安装的那个。如果列表里没有点「Enter interpreter path」手动填路径。JSDoc 写了但调用处还是没提示。检查注释和函数之间有没有空行JSDoc 必须紧贴声明。另外param里的类型名拼写要正确{string[]}表示字符串数组写成{Array}提示会弱很多。如果项目用了 TypeScript 的checkJsJSDoc 类型错误会直接报红这时按提示改类型即可。Node 请求报连接错误。先确认baseURL写的是https://taotoken.net/api没有多余斜杠或路径。再确认 Key 没有多余空格。可以在终端用curl快速测一下通道是否通排除是代码问题还是网络问题。6. 把模型调用收进同一套工作流到这里你的 vscode 里已经能同时做三件事用 JSDoc 给 JS 补类型提示、用 launch.json 断点调试 Node、直接运行 Python 脚本并且这些脚本调用的模型接口统一走 TaoToken 的 Key 和 API 地址。后续如果你想换更强的模型做代码补全或长文本处理只需要改model字段Node 和 Python 两边都不用动鉴权配置。如果你主要做长期编码和 Agent 类任务可以了解一下 Coding Plan它把模型调用和编码工作流结合得更紧https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite想先在网页里试一下模型对话效果确认返回格式再写进脚本可以用模型对话页面https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite接入过程中如果遇到鉴权或参数格式问题接入文档里有各语言的完整示例https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite我自己的习惯是先把ask函数在断点里跑通一次确认res结构再把它复制到 Python 里改语法。这样两边行为一致排查时只需要看一处配置。
返回列表