二、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 能帮你在编辑器里直接预览和编辑各种文档。

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

看长文的时候，我还要用 Typora 等专业的 Markdown 编辑器打开文档，比较麻烦。

在扩展商店搜索 "Office Viewer" 并安装后，可以直接在编辑器中使用所见即所得的 Markdown 编辑器，看文档、写文档都很方便，不用来回切换窗口。

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

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

虽然编辑器本身也能检查一些基本的语法错误，但对于代码规范、潜在的逻辑漏洞等问题，就需要专业的代码检查工具来把关了。

现在很多 AI 生成的项目代码都会自带 ESLint 配置文件（比如 .eslintrc.js 或者 eslint.config.js），定义好团队统一的代码检查规则。

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

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

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" 并安装后，直接在编辑器里就能看到输出结果，看到每个日志是从哪个文件哪一行输出的，还能显示网络请求和错误堆栈。

有了它，不用频繁切换窗口了，调试效率大大提升。