一天复制粘贴八十次，手都酸了，活还没干完。

先说个常见画面。

小李刚开始用 AI 写代码：打开浏览器问问题 → AI 给代码复制 → 切回编辑器粘贴 → 报错复制报错 → 切回浏览器粘贴再问……一个下午光 Ctrl+C/V 按了两百多次。更要命的是，网页 AI 根本不知道你项目长什么样，你问”这个函数怎么改”，它连你文件都没见过只能靠猜。

今天解决这一件事：把 AI 请进编辑器，让它跟你坐同一张桌子干活。

一、先扫盲：IDE 是什么？插件又是什么？

IDE = 你的厨房——写代码改代码跑代码的屋子。前面 Cursor、Trae 本质都是”别人装修好的厨房”。而 VS Code 是全球用得最多的那间厨房，免费、轻、什么活都能干。

插件 = 往厨房添的家电：想烤面包装烤箱，想榨汁装榨汁机，想让 AI 帮你写代码就装个 AI 插件。厨房本身不变，你只是多了个帮手。这就是”把 AI 接进 IDE”的全部含义：不换编辑器，只加一个插件。

二、为什么非得接进来？网页聊天不香吗

网页能用，但有三个躲不掉的痛点：

1. 复制粘贴时间比写代码还长——AI 给的代码越长越容易漏行缩进错。插件直接在光标处写出来，一个键接受，零复制。
2. 网页 AI 看不见你项目——你问”getUserInfo 为什么报错”，它内心 OS：这函数长啥样、在哪个文件、调用了啥，我全不知道。插件能读你打开的文件、选中的代码、甚至整个项目结构，同问题回答质量差好几个档次。
3. 改完还得自己往回搬——网页说”你把23行改成这样”，你得自己数、自己删、自己粘；插件直接给”接受修改”按钮，绿增红删看一眼点一下。

一句话：网页 AI 适合”学”，插件 AI 适合”做”。

三、第一步：装 VS Code（五分钟，跟装微信一样）

已装过跳到第四节。① 搜 “VS Code” 或访 code.visualstudio.com，认准深蓝官网大下载按钮；② 点下载自动识别系统；③ 双击一路”下一步”，Windows 勾上”添加到 PATH”；④ 打开看到深色空界面，别急找写代码处。

顺手换中文：按 Ctrl+Shift+X（Mac Cmd+Shift+X）→ 输 Chinese → 装 “Chinese (Simplified) Language Pack” → 右下角 Change Language and Restart，重启全中文。

四、装插件的通用四步（记住这套，装什么插件都一样）

第1步：开插件市场——Ctrl+Shift+X 或点左边竖排第四个方块图标。 第2步：搜插件名——面板顶部搜索框输入。 第3步：认准下载量最多的——搜出七八个山寨，三标准：看下载量、看发布者蓝勾认证、看名字完全一致。 第4步：点 Install 然后登录——右下角弹提示点它，浏览器自动打开登录完跳回。四步走完 AI 就在编辑器里了。

五、装哪一个？四款主流插件实情

按新手上手难度给你四个：

选择一：Qoder CN（国内新手首选）——搜 Qoder CN（Alibaba Cloud），不翻墙、个人基础版免费、扫码十秒、全中文，装完右侧聊天面板+灰字补全。推荐理由：不用信用卡邮箱翻墙，排除90%卡壳。

选择二：GitHub Copilot（老牌能力强）——搜 GitHub Copilot，要翻墙；现在个人有永久免费档（每月 2,000 次补全 + Copilot CLI，无需绑卡），付费档能力更全、学生/开源权益可免费，GitHub 账号登录。第56篇专讲过，能稳定访问 GitHub 它仍是能力最强之一。

选择三：CodeGeeX / Fitten Code（备选纯免费）——不用翻墙免费，适合只想要”自动补全”不要聊天面板的人。

选择四：Claude Code（Anthropic 官方插件，能力最强但要翻墙）——搜 Claude Code（发布者 Anthropic），装完它不只是一个聊天框，而是会自己动手干活的 AI 搭档：能读整个项目、跑命令、直接改你文件、还能一步步告诉你它改了什么。它属于第九节说的”离你代码最近”那一档，上手后最像”雇了个人坐你旁边”。代价：① 要翻墙（Anthropic 服务国内直连不稳，得有代理）；② 登录要 Claude 订阅（Pro/Max）或 API Key（ANTHROPIC_API_KEY）或接入 DeepSeek 等大模型（上文已经讲过），没有就白装；③ 它会真动你文件，新手先用前面几款练手再上它更稳。按第四节通用四步安装即可，登录时在弹出的浏览器里用 Claude 账号授权，或用命令行 claude 里敲 /ide 让它自动连上 VS Code。

我的建议：新手直接装 Qoder CN，一个就够。 装几个个会互相抢补全，界面跳三条灰字反而乱。等这把顺手了、又有稳定网络/API 条件想让 AI 真正替你跑工程，再上 Claude Code——它和 Qoder CN 不冲突，可以一个当主力、一个当进阶搭档。实在只想要补全、不想折腾，CodeGeeX 也行。

六、装完必做的三件事（不做等于白装）

很多人装完直接开工觉得”好像没用”，多半漏这三步。

第一件：确认真启动了——看右下角状态栏有没有插件图标或名字，没有九成没登录，点面板登录走一遍。 第二件：认识”灰字补全”三个键——Tab 全接受、Esc 不要、Ctrl+→ 只接受一个词。新手最烦灰字乱跳，解法不是卸载是练熟 Esc。 第三件：找到聊天面板位置——一般在右侧或点左侧插件图标开。这才是主战场。在里面对话，和网页版最大区别：用 @ 引用当前文件让它读你正看的；选中代码再提问只针对这段；输入 / 跳出快捷命令。

七、三分钟实战：做一个能用的小页面

① 新建文件夹 我的第一个页面；② VS Code 文件→打开文件夹选中它；③ 开右侧聊天面板，原样粘贴模板一；④ 生成后点”应用/插入到文件”或复制全部新建 index.html 粘贴 Ctrl+S；⑤ 左侧文件列表右键”在默认浏览器打开”。一个待办清单就出来了。

不满意回聊天面板继续说人话：「按钮改深绿、标题居中、输入框再大点」。

八、五个新手坑，提前告诉你

1. 装了没登录——最高频假失败，看右下角有没有图标，没有去登录。
2. 同时装三四个 AI 插件——它们抢着给灰字界面乱闪，留一个其余点”禁用”（不用卸载）。
3. 没打开文件夹只打开单个文件——插件”读项目”前提是你用”打开文件夹”打开项目，只开孤零零文件它看不到全貌。
4. 提问时不选中代码——你问”这段为什么报错”却什么都没选，它不知”这段”是哪段，先选中再提问是铁律。
5. 指望它一次写完大项目——「帮我做电商网站」一定给半成品，一次只做一件小事，这规律从第55篇讲到现在，新手翻车头号原因。

九、这一节核心就一句话

从第55篇到今天，装了 Cursor、Copilot、Trae、Qoder CN、Claude Code，又是 VS Code 插件。工具很多，但底层逻辑只有一条：让 AI 离你代码越近，答案越准。

• 网页聊天——离你十米远只能猜
• IDE 插件——坐在你旁边看得见屏幕
• 命令行工具——拿到整个项目钥匙（Claude Code 既是命令行工具，也出了官方 VS Code 插件版，就是第五节”选择四”，本质一样：把整个项目交出去，让它自己跑命令、改文件）

离得越近能力越强，你要承担风险越大。 网页 AI 顶多说错话，命令行 AI 能真改你文件。插件这档恰好是新手最佳平衡点：够懂你项目，又不会背着你乱动。所以建议很直接：只想装一个就开始，就装 VS Code + Qoder CN（它现在也有自己的独立 IDE，想换个编辑器也行）。

提示词模板盒子

以下模板直接复制，方括号换成你自己的。

模板一：单文件网页起手式（万能，对应第七节实战）

我完全不会写代码。请帮我做一个单文件网页，文件名 index.html，
HTML、CSS、JavaScript 全写在这一个文件，不引用任何外部库。
功能需求：
1. [大白话写要什么，例如：待办清单，能添加、删除、标记完成]
2. [第二个功能]
界面要求：简洁淡雅，手机打开不乱。
请直接给完整代码，并用中文注释说明每段干什么。

模板二：插件对话两场景（对应第六、九节）

场景A｜选中代码后提问（插件专属，网页做不到）：
我选中的这段代码，请用小白能懂的中文告诉：
1. 它是干什么的（一句话）
2. 逐行解释（每行一句中文）
3. 有没有明显问题或可改进处
不要给我新代码，只解释。

场景B｜装好后的第一句话（验证是否可用）：
你好，请用一句话告诉我你能帮我做什么。
然后判断：我现在打开的这个文件是干什么用的？没打开任何文件就直接说"你还没打开文件"。

模板三：修改与报错（对应第八节坑四、坑五）

场景A｜局部修改（安全，不动别处）：
请只修改我选中的这部分，其他任何代码都不要动。
我要的效果是：[描述变化]
改完告诉我：具体改了哪几行，为什么这么改。

场景B｜报错求救（小白版）：
我遇到报错了，完整报错是：
[把报错原文整段粘贴]
请按序：1）一句大白话说这是什么問題；2）具体哪个文件哪行导致；3）怎么改（给改好代码段）；4）以后怎么避免。

下篇预告

第60篇：开发 AI 工具对比与选型——按场景选最顺手的那把刀。 工具入门收官篇，把几款工具摆一张表横向比，给你”三个问题”决策流程图，三分钟锁定接下来三个月该守着哪个。