20 个神级 AI 编程扩展，爽爆了！

大家好，我是程序员鱼皮。给大家分享一些我自己在用的 AI 编程扩展，帮你大幅提高 AI 编程效率和代码质量。
万字长文 + 100 多张图，绝对干货！点个收藏，让我们开始吧~

本文已收录到 鱼皮 AI 导航的《免费 Vibe Coding 教程》 中，可以在这里免费获取更多 AI 资源。

 
一、MCP 服务器类

MCP 的全称是 Model Context Protocol 模型上下文协议。简单来说，就是让 AI 大模型能够连接外部工具和数据源的一个开放标准。
打个比方，MCP 就像是 AI 的 USB-C 接口，原本 AI 只能根据训练数据来回答问题、生成代码，但有了这个统一接口，它就能连接各种外部工具，比如打开浏览器看网站、搜索并抓取网页内容、部署项目到云端、访问数据库等等，能力一下子就丰富起来了。

 
⭐️ Firecrawl MCP 网页内容抓取

首先要介绍的是 Firecrawl MCP，让 AI 能够自动抓取和理解网页内容。
我在开发项目时经常需要从网上获取参考资料、阅读官方文档和技术博客，或者分析竞品的功能实现。如果人工来做这件事，需要先打开网站、再手动复制粘贴内容，或者自己写个爬虫脚本，麻烦得一批。
有了 Firecrawl MCP，这事儿就简单多了。我直接在 AI 编程工具中跟 AI 说：

• 帮我获取这个网站的内容
  
• 帮我读一下这个文档
  
• 帮我从网上搜索 XX 相关的信息
  

它就能自动把网页的内容、结构、甚至是动态加载的数据都给我抓下来。

 
如何使用？
首先你需要在 Firecrawl 官网 注册账号，并创建一个调用服务的 API Key。

然后进入到 AI 编程工具中配置一下 MCP 服务器。这里我以 Cursor 为例，其他 AI 编程工具对接 MCP 的方法可以看各自的官方文档，比如 Claude Code 接入 MCP 文档。
打开 Cursor 设置，找到 Tools & MCP，点击 + New MCP Server。

本质上就是修改 MCP 配置文件，添加这样的配置：

1. {
2.  "mcpServers": {
3.    "firecrawl-mcp": {
4.      "command": "npx",
5.      "args": ["-y", "firecrawl-mcp"],
6.      "env": {
7.        "FIRECRAWL_API_KEY": "你的API密钥"
8.     }
9.   }
10. }
11. }

复制代码

这段配置的意思是：通过 npx 命令来运行 firecrawl-mcp 这个工具，并且把你的 API 密钥传给它。如果你电脑上还没有安装 npx，需要先 到官网安装 Node.js，npx 会随着 Node.js 一起安装。
配置好之后，看到绿色的成功点点，表示能够正常使用了。

除了基础的网页抓取，Firecrawl MCP 还支持批量抓取整站内容、递归抓取网站的多层链接、失败自动重试等高级功能。
 
Brave Search MCP 隐私搜索

接下来是 Brave Search MCP，让 AI 能够进行注重隐私保护的网络搜索。
在开发过程中，我经常需要让 AI 帮我搜索最新的技术资料、查找某个库的使用示例、或者了解某个技术问题的解决方案。传统的做法是自己去搜索引擎查，然后把结果复制给 AI，比较麻烦。
有了 Brave Search MCP，我直接跟 AI 说：

• 帮我搜索一下 React 19 的新特性
  
• 查一下这个错误怎么解决
  

它就能通过 Brave 搜索引擎去找答案。而且 Brave 搜索不会追踪你的搜索记录，隐私保护做得很好。

 
如何使用？
首先去 Brave Search API 注册账号，然后进入 API Key 管理页面，首先要选择一个订阅计划。必须选择免费版啊！每月有 2000 次查询额度，对于个人开发来说够用了。

但这里比较坑的一点是，即使订阅免费版，也要填写付款方式，没有海外银行卡的朋友可以撤了。
订阅成功后，创建 API Key：

拿到 API Key 后，在 Cursor 的 MCP 配置中添加：

1. {
2.  "mcpServers": {
3.    "brave-search": {
4.      "command": "npx",
5.      "args": ["-y", "brave-search-mcp"],
6.      "env": {
7.        "BRAVE_API_KEY": "你的API密钥"
8.     }
9.   }
10. }
11. }

复制代码

配置好后，AI 就能随时帮你搜索最新信息了。
支持网页、图片、视频、新闻等多种类型的内容搜索，甚至能搜索本地商家信息（比如附近的咖啡店）。

它还带有 AI 摘要功能，能把搜索结果自动总结成简洁的答案。
 
⭐️ Context7 获取最新文档

Context7 能帮 AI 获取到最新的技术文档。
我们都知道，AI 的训练数据是有截止时间的，比如 GPT-4 的知识可能只更新到 2023 年。这就导致一个问题，当你问 AI 关于某个框架最新版本的用法时，它给出的答案可能是过时的。
Context7 就是来解决这个问题的。它会自动从官方文档网站抓取最新的、特定版本的文档内容，然后提供给 AI。

这样一来，AI 给出的代码示例和建议就是基于最新文档的，不会去用已经废弃的写法，大大提高了项目能正常运行的概率。
 
如何使用？
访问 Context7 Dashboard 注册账号并获取 API Key，个人使用是免费的。

然后在 MCP 配置中添加：

1. {
2.  "mcpServers": {
3.    "context7": {
4.      "url": "https://mcp.context7.com/mcp",
5.      "headers": {
6.        "CONTEXT7_API_KEY": "你的API密钥"
7.     }
8.   }
9. }
10. }

复制代码

之后你在 AI 编程工具中跟 AI 对话时，只要跟技术文档相关，或者主动提一嘴 "use context7"，它就会自动去获取最新文档来回复你。

 
Web to MCP 复刻网页组件

Web to MCP 是一个 Chrome 扩展，搭配 MCP 使用，能把网页上的任何 UI 组件直接发送给 AI，让 AI 生成对应的代码，用最快的速度抄作业！

很多时候，我在浏览网站时看到一个不错的 UI 组件，想让 AI 帮我实现类似的效果。以前的做法是截图，然后跟 AI 描述：“帮我做一个类似这样的按钮，圆角、渐变色、带阴影……” 既费时又不准确。
有了 Web to MCP，我只需要在网页上点击某个想复刻的元素：

它就会自动捕获组件的 DOM 结构、CSS 样式、甚至是交互效果，并且给你一个让 AI 复刻组件的提示词。
你只需要把提示词发送给 AI，AI 会调用 MCP 拿到完整的组件信息，并生成代码来复刻组件。

相比于直接给 AI 模糊的截图，生成的代码更准确了。

 
如何使用？
1）通过官网或者在 Chrome 应用商店搜索 Web to MCP 来安装扩展

2）用 Google 账号登录，获取你的 MCP 配置：

3）在 AI 编程工具的 MCP 配置中添加：

1. {
2.  "mcpServers": {
3.    "web-to-mcp": {
4.      "url": "https://web-to-mcp.com/mcp/你的唯一ID"
5.   }
6. }
7. }

复制代码

之后浏览网页时，点击扩展图标，选中你想要的组件，就能直接在 AI 编程工具里引用它，并且快速生成风格一致的代码了。
 
Chrome DevTools MCP 浏览器调试

Chrome DevTools MCP 是 Chrome 官方团队开发的 MCP 服务器，让 AI 能够直接控制 Chrome 浏览器进行操作和调试。
在做前端开发时，我经常需要调试页面、查看网络请求、分析性能问题。以前这些都得手动在浏览器的开发者工具里操作，现在有了这个工具，我可以直接让 AI 帮我做这些事。
比如我跟 AI 说：“帮我分析当前这个网站加载慢的原因”，它就能打开 Chrome DevTools，分析网络请求、查看资源加载时间，然后告诉我哪里有问题。

或者我说：“帮我测试一下这个表单提交功能”，它就能自动填写表单、点击提交按钮、查看请求响应。
如何使用？
在 MCP 配置中添加：

1. {
2.  "mcpServers": {
3.    "chrome-devtools": {
4.      "command": "npx",
5.      "args": ["-y", "chrome-devtools-mcp@latest"]
6.   }
7. }
8. }

复制代码

配置好后，AI 就能帮你自动化测试、调试页面了。工具会自动连接到你正在运行的 Chrome 浏览器，无需额外设置。
这个工具还支持元素定位、网络请求监控、性能分析、页面截图等功能，非常适合前端开发和测试。
 
EdgeOne Pages MCP 一键部署

EdgeOne Pages MCP 是腾讯云团队开发的部署工具，能把你的项目一键部署到腾讯云的加速网络，让别人能访问你的网站，并且给你的网站提速。
开发完项目后，你一定会想让别人访问你的网站。传统的部署流程很繁琐，需要人工打包代码、上传代码到服务器、配置域名、设置 HTTPS 安全证书，一套流程下来得花不少时间。

有了 EdgeOne Pages MCP，我直接在 AI 编程工具里跟 AI 说：“帮我部署这个项目”，它就能自动完成打包、上传、部署的全过程，最后给我一个可以直接访问的 URL。而且部署到全球加速网络，各地访问速度都很快。

 
如何使用？
首先到 EdgeOne 控制台 开通 Pages 服务：

然后获取 API Token，作为调用服务的凭证：

在 MCP 配置中添加：

1. {
2.  "mcpServers": {
3.    "edgeone-pages-mcp-server": {
4.      "command": "npx",
5.      "args": ["edgeone-pages-mcp"],
6.      "env": {
7.        "EDGEONE_PAGES_API_TOKEN": "你的API Token"
8.     }
9.   }
10. }
11. }

复制代码

配置好后，就能让 AI 帮你一键部署项目了。部署是免费的，支持静态网站、全栈项目、自动配置 HTTPS 和 CDN 加速等功能，非常适合个人项目和小型应用。

 
COS MCP 对象存储

COS MCP 能让 AI 直接操作腾讯云对象存储。
对象存储就是云端的文件存储服务，可以理解为云盘。

在团队协作开发中，我们经常需要让 AI 参考一些项目规范文档、或者引用一些图片。以前的做法是把这些文件放在本地，然后手动上传给 AI，既不方便，也不利于团队维护、修改和共享。
有了 COS MCP，我可以说一句话把这些需要共享的文件存到云端，然后让 AI 直接去读取。

比如我跟 AI 说：“按照我们团队 COS 共享的项目规范文档来写这个功能”，它就能自动从 COS 里读取规范文档，然后按照规范来写代码。

 
如何使用？
1）首先需要开通腾讯云 COS 对象存储服务。访问 腾讯云 COS 控制台，创建一个存储桶（Bucket）：

2）然后在 "访问管理" > "API 密钥管理" 中获取 SecretId 和 SecretKey，注意一定不要泄露这些信息！

3）在 MCP 配置中添加：

1. {
2.  "mcpServers": {
3.    "cos-mcp": {
4.      "command": "npx",
5.      "args": [
6.        "cos-mcp",
7.        "--Region=你的地域",
8.        "--Bucket=你的存储桶",
9.        "--SecretId=你的SecretId",
10.        "--SecretKey=你的SecretKey"
11.     ]
12.   }
13. }
14. }

复制代码

配置好后，AI 就能读取和管理你云端的文件了，相当于给了 AI 一个网盘。
此外，这个工具还支持图片搜索、图片处理、文档转换、视频封面生成等功能。

 
GitHub MCP 代码仓库管理

GitHub MCP 是 GitHub 官方开发的 MCP 服务器，让 AI 能够直接操作 GitHub 代码仓库。
程序员朋友们对 GitHub 肯定不陌生，这是全球最大的代码托管平台，可以用它来存储代码、团队协作开发。

在日常开发中，我可能需要搜索 GitHub 代码仓库、创建 Issue 问题反馈、提交 PR 代码合并请求、查看代码变更、分析提交历史等等。以前这些操作都得在 GitHub 网站上手动完成，现在我可以直接让 AI 帮我做。
比如我跟 AI 说：“我最近在 GitHub 上开源了哪些项目？star 数如何？”

它就能快速给我在 GitHub 上的项目生成一份数据报告：

或者我说：“帮我看看最近一周的代码变更”，它就能分析 Git 提交记录，告诉我都改了什么。

 
如何使用？
首先需要在 GitHub 获取到你的 Access Token，作为访问你 GitHub 资源的凭证：

然后在 MCP 配置中添加：

1. {
2.  "mcpServers": {
3.    "github": {
4.      "url": "https://api.githubcopilot.com/mcp/",
5.      "headers": {
6.        "Authorization": "Bearer 你的GitHub凭证"
7.     }
8.   }
9. }
10. }

复制代码

这个工具还支持代码分析、CI/CD 监控、安全扫描等功能，基本上你在 GitHub 中能做的事，AI 都能帮你做。

 
 
二、IDE 扩展插件类

MCP 服务器讲完了，接下来聊聊 IDE 扩展插件。
IDE 就是集成开发环境，简单理解就是写代码的软件，比如 VS Code、JetBrains IDEA 这些，可以通过安装插件来增强编辑器的能力，让你的开发体验更上一层楼。
值得一提的是，现在很多有图形界面的 AI 编程工具（比如 Cursor）都是基于 VS Code 开发的，自然也支持 VS Code 的插件，所以下面我也主要分享 VS Code 插件，装上就能用。

 
Claude Code 官方扩展

Claude Code 是 Anthropic 推出的 AI 编程助手，原本是独立的命令行工具。而 Claude Code VS Code 扩展 能让你在代码编辑器中直接使用 Claude Code，不用额外打开终端。
在 VS Code 或 Cursor 的扩展商店搜索 "Claude Code" 即可安装：

这个扩展的优点是提供了图形界面，你可以通过侧边栏面板和 Claude 对话，能够灵活输入文字。

当 AI 修改代码时，你能在编辑器里实时看到变化，并且自动显示 diff 对比，让你清楚地知道 AI 改了哪些地方。

我经常用它来重构代码、修复 Bug、添加新功能。它还支持多会话并行，也就是说你可以同时让多个 Claude 代理处理不同的任务，比如一个负责前端，一个负责后端，大大提高开发效率。

顺带一提，类似的插件还有 Cline、GitHub Copilot 等，功能都差不多，大家可以根据自己的喜好选择。
 
GitLens Git 可视化

GitLens 能让你更直观地查看 Git 代码的修改历史。

Git 是程序员用来管理代码版本的工具，简单理解就是能记录代码的每一次修改，包括谁改的、什么时候改的、为什么改。
有了这些记录，出了 Bug 时我就能快速找到 “凶手” 追责。

但 Git 只是个命令行工具，想查看历史记录还需要手敲命令，看起来也不太舒服。

当我通过编辑器的扩展商店安装了 GitLens 后，把鼠标放到任意代码行上，GitLens 就会自动显示这行代码的作者、相关的 PR 合并请求等等。

进入 Git 管理面板，整个项目的提交记录一目了然。

此外，它还支持 AI 功能，能自动生成提交信息、解释代码变更、生成变更日志、用 AI 解释某次改动的目的。

 
⭐️ Office Viewer 文档预览

Office Viewer 能帮你在编辑器里直接预览和编辑各种文档。

我们知道，AI 输出的文档内容以 Markdown 格式为主，默认的编辑器中打开 Markdown 文件只能看到原始的标记语法，不够直观。

看长文的时候，我还要用 Typora 等专业的 Markdown 编辑器打开文档，比较麻烦。
在扩展商店搜索 "Office Viewer" 并安装后，可以直接在编辑器中使用所见即所得的 Markdown 编辑器，看文档、写文档都很方便，不用来回切换窗口。

此外，这个插件支持 Excel 表格、Word 文档、PDF 文档、SVG、字体文件、压缩包等多种格式，堪称编辑器里的万能文档查看器。
 
⭐️ ESLint 代码质量检查

ESLint 是前端 JavaScript / TypeScript 项目必备的代码检查工具。

虽然编辑器本身也能检查一些基本的语法错误，但对于代码规范、潜在的逻辑漏洞等问题，就需要专业的代码检查工具来把关了。
现在很多 AI 生成的项目代码都会自带 ESLint 配置文件（比如 .eslintrc.js 或者 eslint.config.js），定义好团队统一的代码检查规则。

在扩展商店搜索 "ESLint" 并安装后，插件会自动检测项目中的规则配置文件，然后实时检查代码中的问题，并给出修复建议。

这样一来，AI 写的代码如果有不规范的地方，你立刻就能发现并让 AI 修正，避免埋下隐患。
 
⭐️ Prettier 代码格式化

Prettier 是一个代码格式化工具，能自动统一代码风格。

团队协作时，每个人的编码习惯不同，有的代码缩进 4 格、有的缩进 2 格；有的用单引号、有的用双引号。大家的代码风格五花八门，看着就很乱，代码审查时也容易出现 Beef。
这时就需要统一的格式化规范了。现在很多 AI 生成的项目代码都会自带 Prettier 配置文件（比如 .prettierrc），定义好统一的格式化规则。

在扩展商店搜索 "Prettier" 并安装后，就可以用快捷键一键格式化代码。

还可以在 VS Code 的设置里搜索 "Format On Save" 并开启，这样每次保存代码时就会自动格式化，保证整个项目的代码风格一致。

 
Error Lens 错误实时显示

Error Lens 能让你一眼看到代码中的错误。

一般情况下，如果代码中有错误，你得把鼠标移到红色波浪线上才能看到错误提示，不够直观。
 
在扩展商店搜索 "Error Lens" 并安装后，错误信息会直接高亮显示在代码行尾，你一眼就能看到哪里有问题。

 
Console Ninja 控制台日志显示

Console Ninja 能让你在编辑器里直接看到代码的运行结果。

在调试前端代码时，我经常需要看 console.log 打印出来的日志输出。要先切换到浏览器，再按 F12 打开开发者工具来查看控制台，比较麻烦。

在扩展商店搜索 "Console Ninja" 并安装后，直接在编辑器里就能看到输出结果，看到每个日志是从哪个文件哪一行输出的，还能显示网络请求和错误堆栈。
 
有了它，不用频繁切换窗口了，调试效率大大提升。
 
三、跨编辑器通用工具

前面介绍的工具都是对编辑器能力的增强，接下来聊聊跨编辑器通用的工具。这些工具不依赖特定的编辑器，适用于 Cursor、VS Code、Claude Code、GitHub Copilot 等几乎所有主流的 AI 编程工具。
 
Spec-kit 规范驱动开发

Spec-kit 是 GitHub 推出的规范驱动开发（SDD）框架。
什么是 SDD 呢？
传统开发流程是：想到什么写什么，边写边改，最后再补文档。这样容易导致需求不清晰、代码和文档对不上。
而规范驱动开发的思路正好相反：先把需求写成规范文档，并且把规范文档当作代码的 唯一真相来源。你可以把规范文档理解为 法律条文，它包含了详细的需求描述、系统设计和接口定义。AI 必须严格遵守这些条文来生成代码，确保产出完全符合预期。

听起来有些抽象，我们可以跟着 Spec-kit GitHub 仓库 的官方文档来实战一下。
首先打开终端，利用 uvx 命令直接安装运行 Specify 工具，并初始化一个项目：

1. uvx --from git+https://github.com/github/spec-kit.git specify init my-project

复制代码

 
选择你使用的 AI 编程工具，Spec-kit 支持 Claude Code、GitHub Copilot 等几乎所有主流编程工具。这里我选 Claude Code：

根据操作系统选择脚本类型，Windows 选下面的，其他选上面的：

执行完这个命令后，会在当前目录下创建一个 my-project 文件夹：
 
文件夹里面包含了这些核心文件：

• .specify/memory/constitution.md：项目的基本准则和约定
  
• .specify/scripts/：一些可执行脚本
  
• .specify/templates/：模板文件
  
• .claude/commands/：定义了一套内置的斜杠命令，让你在 AI 编程工具中可以直接调用
  

 
初始化程序还给了我们一些指引，告诉我们接下来如何运用这些命令来开发项目。

用 Claude Code 打开这个项目文件夹，就可以在对话中使用定义好的命令了。
 
接下来就是标准化的开发流程，参考 官方文档，主要分为 7 个步骤：
1）Constitution 制定项目准则
运行 /speckit.constitution 命令，定义项目的基本原则、代码规范、性能标准等。这是项目的 “宪法”，后续所有开发都要遵守。
比如：

1. /speckit.constitution 禁止使用蓝紫渐变色风格的 UI

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！