一、ESLint MCP 概述
Model Context Protocol（MCP）作为一项开放标准，致力于为 AI 模型与外部工具及服务之间搭建统一的交互桥梁。ESLint 借助内置的 MCP 服务器，能够与 GitHub Copilot、Cursor、Windsurf 等编辑器深度集成。通过这一集成，大语言模型（LLMs）可直接调用 ESLint 的代码检查能力，从而实现自动化代码规范检查、错误修复以及规则解释等一系列强大功能。对于开发者而言，这意味着可以将更多的精力聚焦于代码逻辑的优化，而非耗费在琐碎的代码规范问题上。
二、ESLint MCP 核心优势
- AI 驱动的代码质量提升：LLMs 能够结合 ESLint 规则，智能地识别代码中的潜在问题，例如常见的语法错误、不符合编码规范的写法等，并且可以自动生成修复建议，显著提高代码的质量和一致性。
- 多编辑器兼容适配：ESLint MCP 具备良好的兼容性，能够在主流的代码编辑器中运行，这使得开发者可以根据自己的使用习惯选择合适的工具，无需为工具的适配问题担忧。
- 统一配置与便捷管理：通过标准化的配置文件，开发者可以轻松地在不同的项目和工作空间中复用 ESLint MCP 的配置，实现了配置的统一管理，减少了重复配置的工作量。
三、ESLint MCP 安装与配置实践
（一）在 VS Code 中的配置
1. 安装必要扩展
首先，需要在 VS Code 中安装 Copilot Chat 扩展，这是使用 ESLint MCP 服务器的前提条件。
2. 两种创建配置文件的方式
- 手动创建文件：在项目根目录下，新建一个
.vscode/mcp.json文件，并在其中添加以下配置内容：
{
"servers": {
"ESLint": {
"type": "stdio",
"command": "npx",
"args": ["@eslint/mcp@latest"]
}
}
}
- 通过命令面板创建：按下
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）组合键，打开命令面板。在命令面板中，输入并选择MCP: Add Server命令。接着，从下拉菜单中选择Command (stdio)，然后输入命令npx @eslint/mcp@latest，设置服务器 ID 为ESLint，最后选择Workspace Settings，这样就会在.vscode/mcp.json文件中生成相应的配置。
3. 启用全局配置（可选操作）
如果希望在所有工作空间中都能使用 ESLint MCP 服务器，可以按照上述步骤创建配置文件，但在选择配置存储位置时，选择 User Settings，这样配置就会被添加到 settings.json 文件中，实现全局可用。
（二）在 Cursor 中的配置
1. 创建项目配置文件
在项目目录下，创建 .cursor/mcp.json 文件，其配置如下：
{
"mcpServers": {
"eslint": {
"command": "npx",
"args": ["@eslint/mcp@latest"],
"env": {}
}
}
}
2. 配置全局文件（可选操作）
若要在所有 Cursor 工作空间中使用该服务器，需在用户主目录下创建 ~/.cursor/mcp.json 文件，并添加与项目配置文件相同的内容。
3. 验证工具可用性
配置完成后，打开 Cursor 的 MCP 设置页面，在“Available Tools”部分应能看到 ESLint MCP 服务器已列出，这表明配置成功。
（三）在 Windsurf 中的配置
1. 进入设置界面
可以通过导航到 Windsurf - Settings > Advanced Settings，或者打开命令面板并选择“Open Windsurf Settings Page”来进入 Windsurf 的设置页面。
2. 添加服务器
在设置页面的 Cascade 部分，点击“Add Server”按钮，然后选择“Add custom server +”。
3. 编辑配置文件
在 ~/.codeium/windsurf/mcp_config.json 文件中，添加以下配置：
{
"mcpServers": {
"eslint": {
"command": "npx",
"args": ["@eslint/mcp@latest"],
"env": {}
}
}
}
4. 刷新服务器列表
完成配置后，按下刷新按钮，更新可用的 MCP 服务器列表，确保 ESLint MCP 服务器被正确识别。
四、与 GitHub Copilot 协同使用 ESLint MCP
（一）开启代理模式
在 VS Code 中打开 Copilot Chat 视图，确保开启代理模式。可以通过查看聊天输入框中的代理图标来确认是否已启用。
（二）调用 ESLint 工具
点击聊天视图中的“Tools”按钮，在工具列表中找到并启用 ESLint MCP 服务器工具。之后，就可以向 Copilot 发送指令来执行 ESLint 任务了。例如：
- 输入“Check this file for linting errors”，Copilot 会检查当前文件的 linting 错误。
- 输入“Fix all ESLint issues in the current file”，Copilot 会尝试修复当前文件中的所有 ESLint 问题。
- 输入“Show me what ESLint rules are being violated”，Copilot 会显示当前文件中违反的 ESLint 规则。
五、常见问题排查
- 检查服务器状态：如果遇到问题，可以通过命令面板运行
MCP: List Servers命令，查看 ESLint MCP 服务器的状态，确保其正常运行。 - 查看服务器日志：在服务器列表中选择 ESLint 服务器，然后选择“Show Output”，通过查看服务器日志来定位问题。
- 确认 ESLint 安装情况：确保 ESLint 已在项目中或全局安装，这是 ESLint MCP 服务器正常工作的基础。
- 验证配置文件：仔细检查 MCP 配置文件的格式和内容是否正确，避免因配置错误导致服务器无法正常启动。
六、实用提示与技巧
- 合理利用提示语句：可以使用一些实用的提示语句来提高工作效率，例如“Lint the current file and explain any issues found”（对当前文件进行 lint 检查并解释发现的问题）、“Lint and fix #file:index.js”（对 index.js 文件进行 lint 检查并修复问题）。
- 关注工具调用消耗：在 Windsurf 中，每次 MCP 工具调用都会消耗 credits，无论调用是否成功，因此在使用过程中需要注意合理使用资源。
七、总结
ESLint MCP 通过将 AI 能力与代码规范检查工具相结合，为开发者带来了全新的开发体验。借助本文提供的详细配置步骤和使用技巧，开发者可以快速在不同的编辑器中集成 ESLint MCP 服务器，并充分发挥其自动化代码检查和修复的优势，从而更专注于创新功能的开发。随着 MCP 生态的不断发展，未来将会有更多强大的工具集成进来，进一步提升开发效率。建议开发者持续关注 ESLint 官方文档，及时获取最新的功能更新和使用技巧。