VS Code新人工智能：30分钟带来令人震惊的结果

现在前端开发工具的规则已经彻底改变！

开发者们过去可能很难想象，有一天安装 Tailwind CSS 只需给 VS Code 一句指令即可。但现在，这已经成为现实。

VS Code 最近推出了“Agent 模式”，它并非只是简单地给出开发建议，而是真正能代替开发者完成一系列实际操作：

• ✅ 自动安装依赖
• ✅ 修改配置文件
• ✅ 启动本地开发服务器

然而首次尝试中，它却意外失败——正是这次失败揭示了使用 AI 工具时最关键的诀窍。

VS Code Agent 模式：真正的 AI 开发同事

如何开启 Agent 模式

这个功能目前正逐步推送，可能并非所有人都能看到。不过开启它其实非常简单：

• 打开设置 (Ctrl+, 或 Cmd+,)
• 搜索 "agent"
• 勾选启用选项

完成以上步骤后，聊天栏就会出现三个模式：

• Ask（类似 ChatGPT 回答问题）
• Edit（修改文件）
• Agent（执行一切操作，像真实开发者）

注意：缺少上下文时，它表现非常笨拙

第一次使用 Agent 模式安装 Tailwind CSS 时，它给出了过时的指令。原因如下：

• Claude 3.5 模型数据停留在 2024 年 4 月。
• Tailwind 最新文档已更新到 2025 年。

解决方案：强制 AI 阅读最新文档

通过使用 #fetch 工具，将 Tailwind 最新官方安装文档链接直接传递给 AI，并明确告知：

「严格按照这些步骤执行。」

于是，它表现完美：

• 跳过多余步骤（已有项目环境）
• 准确修改了 postcss.config.mjs
• 创建 CSS 文件
• 甚至启动了本地开发服务器

AI 工具的真正力量在于，要像指导初级开发人员一样明确指令。

终极考验：它能否独立构建一个完整应用？

开发者给出了一份明确的产品需求文档（PRD），要求构建一个名为“3D 时间表”的 Web 应用。但首先遇到了一个重大障碍：

数据库整合问题

AI 需要了解 Postgres 数据库结构（例如 users、lists 表）。怎么办？

MCP 服务器登场：与数据库直接对话的利器

MCP (Model Context Protocol) 是本地程序，用于将 VS Code 与外部系统（如数据库）连接：

安装过程

1. 从 官网 找到对应 Postgres MCP 服务器。

在这里获取名称包：

2. 使用 npm 安装

npm install <mcp-server-name>

然后返回 VS 代码，搜索’>mcp：添加服务器…’

在 VS Code 中，使用命令行添加 MCP 服务器连接到数据库。

随后，开发者向 Agent 模式提问：

「告诉我数据库的结构？」

AI 立刻连接数据库并准确回复：

「你的数据库有两个表：users 和 lists，主键分别是…」

最关键时刻：“帮我构建这个应用！”

开发者直接在聊天框中输入需求文档，并告诉 Agent 模式：

「请根据这份文档构建完整应用。」

随后，开发者离开电脑，30 分钟后回来检查成果。

30 分钟后的惊人结果

AI 完成了一个完整的应用：

• 使用 Tailwind CSS 构建的 UI 界面
• 数据库整合完毕
• 自动获取链接的元数据（标题、图标）
• 支持拖放排序功能

唯一需要手动修正的，是一个 Postgres 导入语句错误。但即使这个错误，也被 VS Code 内置的智能修复（Next Edit Suggestions）及时捕捉：

自动修正自己的错误

开发者修正了导入语句，VS Code 随即自动提示并修复了其它相关错误。

被忽视的强大功能：“自由选择 AI 模型”

VS Code 的 AI 并非只能使用 Copilot，开发者还能：

• 在设置中打开「管理模型」；
• 输入其它 AI 模型 API Key（如 Gemini、Ollama）；
• 随意切换模型，灵活高效。

最终评价

经过多项测试，得出以下结论：

• ✅ Agent 模式颠覆传统，仅凭指令即可构建完整功能。
• ✅ MCP 服务器解决了 AI 不了解数据库结构的难题。
• ✅ 智能错误修复功能显著节约调试时间。

但与此同时，也有一些局限：

• ⚠️ AI 不是万能的，缺乏明确指令会陷入困境。
• ⚠️ 复杂任务可能需要更长处理时间。

以上关于VS Code新人工智能：30分钟带来令人震惊的结果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。