WebStorm怎么使用AI代码助手_WebStorm AI Assistant教程【对比】-webstorm-PHP中文网

webstorm 2025.3 起原生集成 jetbrains ai assistant，本地模型 mellum 离线免费可用；基础补全无需插件或 api key，但需在 settings 中确认启用并开启自动补全；解释错误时须附上下文文件，agent 重构后须人工核对跨文件变更，生成代码前应校验 eslint 规则。

webstorm怎么使用ai代码助手_webstorm ai assistant教程【对比】

WebStorm 内置 AI 助手开箱即用，不用装插件也能写代码

WebStorm 2025.3 起已深度集成 AI Assistant，不是“需要手动安装的第三方插件”，而是 IDE 原生功能——JetBrains AI Assistant 插件默认启用，本地模型 Mellum 随装随用，完全离线、免费、无需登录。你打开 WebStorm 新建一个 .ts 文件敲 function，后面那个自动补全的整块函数体，就是它在工作。

常见错误现象：有人在插件市场搜 AI Assistant 手动安装，结果冲突报错；或以为必须配 OpenAI Key 才能用基础补全，其实大可不必。

检查是否启用：Settings → Plugins → JetBrains AI Assistant（状态应为 Enabled）
本地补全默认开启，无需联网，Settings → Editor → General → Code Completion 中勾选 Show the code completion popup automatically 即可触发
若想用更强的云端模型（如 Gemini 或 claude-3-haiku），才需在 Settings → AI Assistant → Providers 中配置 API Key

解释报错信息时，别只选堆栈，要连带上下文一起喂给 AI

遇到 Cannot read property 'map' of undefined 这类运行时错误，右键控制台报错行点 Explain with AI 是最省事的路径——但很多人只点了就等答案，结果 AI 给出泛泛而谈的“检查空值”建议，没解决根本问题。

真正起作用的是上下文：AI 需要看到调用链上的 data 来源、相关 useState 初始化逻辑、甚至接口返回结构。

操作步骤：在控制台错误行旁点击 Explain with AI → 左侧 Attachments 面板里手动加文件，比如 useFetch.ts、api.ts、当前组件文件
特别注意：如果错误来自异步回调，务必附上 useEffect 或 async 函数所在文件，否则 AI 无法判断数据流断裂点
不推荐只粘贴错误文本到聊天框提问——缺少 AST 和符号解析，准确率断崖下降

用 Agent 模式重构时，必须人工核对跨文件修改范围

Agent 模式能帮你把 var 全替成 const、把回调地狱转成 async/await，甚至生成配套单元测试——但它不会主动告诉你某次“提取 React Hook”操作会同时改 src/hooks/useApi.ts 和 src/pages/Dashboard.tsx 两个文件。

容易踩的坑是直接点 Apply all，结果 Dashboard.tsx 里引用的旧 hook 名没同步更新，编译直接报 Cannot find module。

每次 Agent 执行后，先展开右侧 Changes 面板，逐个点开预览每个文件的 diff
重点关注 import/export 变更、类型定义移动、以及被删掉的内联逻辑是否真该抽离
对涉及 props 类型变更的重构，务必检查所有调用该组件的地方——Agent 不会自动扫描 JSX 使用处

生成代码片段时，别信“一键插入”，先看它是否匹配你的 ESLint 规则

你在聊天框输入“用 TypeScript 写一个防抖 hook”，AI 返回的代码大概率用 let timer: NodeJS.Timeout | null = null，但你的项目可能启用了 @typescript-eslint/no-explicit-any 或强制 timerRef 用 useRef 管理——这时候直接插入，CI 会立刻 fail。

这不是 AI 的错，是它不知道你项目里 .eslintrc.cjs 里写了什么。