MCP 服务器设置

模型上下文协议 (MCP) 是一个开放标准，使 AI 模型能够通过统一接口与外部工具和服务交互。ESLint CLI 包含一个 MCP 服务器，你可以将其注册到代码编辑器中，以允许 LLM 直接使用 ESLint。

¥Model Context Protocol (MCP) is an open standard that enables AI models to interact with external tools and services through a unified interface. The ESLint CLI contains an MCP server that you can register with your code editor to allow LLMs to use ESLint directly.

在 VS Code 中设置 ESLint MCP 服务器

¥Set Up ESLint MCP Server in VS Code

要在 VS Code 中使用 MCP 服务器，你必须安装 Copilot 聊天 扩展。之后，按照以下步骤添加 ESLint MCP 服务器：

¥To use MCP servers in VS Code, you must have the Copilot Chat extension installed. After that, follow these steps so add the ESLint MCP server:

1. 创建 MCP 配置文件

¥ Create MCP Configuration File

在项目中使用以下配置创建一个 .vscode/mcp.json 文件：

¥Create a .vscode/mcp.json file in your project with the following configuration:

{
	"servers": {
		"ESLint": {
			"type": "stdio",
			"command": "npx",
			"args": ["@eslint/mcp@latest"]
		}
	}
}

或者，你可以使用命令面板：

¥Alternatively, you can use the Command Palette:

  1. 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）

    ¥Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)

  2. 输入并选择 MCP: Add Server

    ¥Type and select MCP: Add Server

  3. 从下拉菜单中选择 Command (stdio)

    ¥Select Command (stdio) from the dropdown

  4. 输入 npx @eslint/mcp@latest 作为命令

    ¥Enter npx @eslint/mcp@latest as the command

  5. 输入 ESLint 作为服务器 ID

    ¥Type ESLint as the server ID

  6. 选择 Workspace Settings 以在 .vscode/mcp.json 中创建配置

    ¥Choose Workspace Settings to create the configuration in .vscode/mcp.json

2. 在用户设置中启用 MCP 服务器（可选）

¥ Enable MCP Server in User Settings (Optional)

如果你想在所有工作区中使用 ESLint MCP 服务器，你可以按照前面的步骤，选择 User Settings 而不是 Workspace Settings，将 MCP 服务器添加到你的 settings.json 文件中。

¥If you want to use the ESLint MCP server across all workspaces, you can follow the previous steps and choose User Settings instead of Workspace Settings to add the MCP server to your settings.json file.

将 ESLint MCP 服务器与 GitHub Copilot 结合使用

¥Using the ESLint MCP Server with GitHub Copilot

配置 MCP 服务器后，即可将其与 GitHub Copilot 的代理模式 结合使用：

¥Once your MCP server is configured, you can use it with GitHub Copilot’s agent mode:

  1. 在 VS Code 中打开 Copilot Chat 视图

    ¥Open the Copilot Chat view in VS Code

  2. 确保已启用代理模式（在聊天输入框中查找代理图标）

    ¥Ensure agent mode is enabled (look for the agent icon in the chat input)

  3. 使用聊天视图中的 “工具” 按钮切换至 ESLint MCP 服务器工具

    ¥Toggle on the ESLint MCP server tools using the “Tools” button in the chat view

  4. 请求 Copilot 执行 ESLint 任务，例如：

    ¥Ask Copilot to perform ESLint tasks, such as:

    • “检查此文件是否存在 linting 错误”

      ¥"Check this file for linting errors"

    • “修复当前文件中的所有 ESLint 问题”

      ¥"Fix all ESLint issues in the current file"

    • “显示正在执行的 ESLint 规则违反”

      ¥"Show me what ESLint rules are being violated"

故障排除

¥Troubleshooting

如果你在使用 ESLint MCP 服务器时遇到问题：

¥If you encounter issues with the ESLint MCP server:

  1. 通过从命令面板运行 MCP: List Servers 来检查 MCP 服务器状态

    ¥Check the MCP server status by running MCP: List Servers from the Command Palette

  2. 选择 ESLint 服务器并选择 Show Output 以查看服务器日志

    ¥Select the ESLint server and choose Show Output to view server logs

  3. 确保 ESLint 已安装在你的项目中或全局环境中

    ¥Ensure that ESLint is installed in your project or globally

  4. 验证你的 MCP 配置是否正确

    ¥Verify that your MCP configuration is correct

在 Cursor 中设置 ESLint MCP 服务器

¥Set Up ESLint MCP Server in Cursor

要在 光标 中配置 ESLint MCP 服务器，请按照以下步骤操作：

¥To configure the ESLint MCP server in Cursor, follow these steps:

1. 创建 MCP 配置文件

¥ Create MCP Configuration File

在项目目录中使用以下配置创建一个 .cursor/mcp.json 文件：

¥Create a .cursor/mcp.json file in your project directory with the following configuration:

{
	"mcpServers": {
		"eslint": {
			"command": "npx",
			"args": ["@eslint/mcp@latest"],
			"env": {}
		}
	}
}

2. 全局配置（可选）

¥ Global Configuration (Optional)

如果你想在所有 Cursor 工作区中使用 ESLint MCP 服务器，请在主目录中创建一个具有相同配置的 ~/.cursor/mcp.json 文件。

¥If you want to use the ESLint MCP server across all your Cursor workspaces, create a ~/.cursor/mcp.json file in your home directory with the same configuration.

3. 验证工具可用性

¥ Verify Tool Availability

配置完成后，ESLint MCP 服务器应出现在 Cursor 中 MCP 设置页面的 “可用工具” 部分。

¥Once configured, the ESLint MCP server should appear in the “Available Tools” section on the MCP settings page in Cursor.

在 Windsurf 中设置 ESLint MCP 服务器

¥Set Up ESLint MCP Server in Windsurf

要在 Windsurf 中配置 ESLint MCP 服务器，请按照以下步骤操作：

¥To configure the ESLint MCP server in Windsurf, follow these steps:

1. 访问 Windsurf 设置

¥ Access Windsurf Settings

导航到 Windsurf - 设置 > 高级设置，或打开命令面板并选择 “打开 Windsurf 设置页面”。

¥Navigate to Windsurf - Settings > Advanced Settings, or open the Command Palette and select “Open Windsurf Settings Page”.

2. 添加 ESLint MCP 服务器

¥ Add ESLint MCP Server

向下滚动到 Cascade 部分，然后点击 “添加服务器” 按钮。然后选择 “添加自定义服务器 +”。

¥Scroll down to the Cascade section and click the “Add Server” button. Then select “Add custom server +”.

3. 配置 MCP 服务器

¥ Configure MCP Server

将以下配置添加到你的 ~/.codeium/windsurf/mcp_config.json 文件：

¥Add the following configuration to your ~/.codeium/windsurf/mcp_config.json file:

{
	"mcpServers": {
		"eslint": {
			"command": "npx",
			"args": ["@eslint/mcp@latest"],
			"env": {}
		}
	}
}

4. 刷新服务器列表

¥ Refresh Server List

添加配置后，点击刷新按钮更新可用 MCP 服务器列表。

¥After adding the configuration, press the refresh button to update the list of available MCP servers.

5. 将 ESLint 与 Cascade 结合使用

¥ Using ESLint with Cascade

配置完成后，你可以通过以下方式将 ESLint 工具与 Cascade 结合使用：

¥Once configured, you can use ESLint tools with Cascade by asking it to:

  • 检查文件是否存在 linting 错误

    ¥Check files for linting errors

  • 解释 ESLint 规则违规

    ¥Explain ESLint rule violations

注意：Windsurf 中的 MCP 工具调用无论成功与否都会消耗信用点数。

¥Note: MCP tool calls in Windsurf will consume credits regardless of success or failure.

示例提示

¥Example Prompts

以下是一些可用于通过 Copilot 运行 ESLint 的提示：

¥Here are some prompts you can use to run ESLint with Copilot:

Lint the current file and explain any issues found

Lint and fix #file:index.js

其他资源

¥Additional Resources