ナスの天ぷらのイラスト

ESLint を MCP サーバーとして実行する

ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM(大規模言語モデル)は ESLint のルールを使用してコードを修正することができるようになります。

音声による概要

この音声概要は AI によって生成されており、誤りを含む可能性があります。

ESLint v9.26.0 から、ESLint を[MCP(Model Context Protocol](feat: Add MCP server by nzakas · Pull Request #19592 · eslint/eslint) サーバーとして実行できるようになりました。この機能により LLM(大規模言語モデル)は ESLint のルールを使用してコードを修正できるようになります。

ESLint を MCP サーバーとして実行する

MCP サーバーとして ESLint を実行するには、--mcp オプションを使用します。

npx eslint --mcp

このコマンドを実行すると stdio transport を使用して MCP サーバーが起動します。

ESLint MCP server is running. cwd: /path/to/your/project

ESLint の MCP サーバーがどのようなツールを提供しているのか MCP Inspector を使用して確認してみましょう。これは GUI ベースで MCP サーバーのデバッグを行うためのツールです。npx @modelcontextprotocol/inspector コマンドの後に MCP サーバーを起動するコマンドを渡して対象の MCP サーバーをデバッグします。

npx @modelcontextprotocol/inspector npx eslint --mcp

http://127.0.0.1:6274 にアクセスして MCP Inspector を開きます。「Transport Type」から「stdio」を選択し、「Command」欄に npx、「Arguments」欄に eslint --mcp が入力されていることが確認できたら「Connect」ボタンをクリックします。

「Tools」タブを選択して「List Tools」ボタンをクリックすると、ESLint の MCP サーバーが提供しているツールの一覧が表示されます。

ESLint の MCP サーバーは以下のツールを提供していることが確認できました。

  • lint-files:Lint files using ESLint. You must provide a list of absolute file paths to the files you want to lint. The absolute file paths should be in the correct format for your operating system (e.g., forward slashes on Unix-like systems, backslashes on Windows).

コーディングエージェントから ESLint MCP サーバーを使用する

コーディングエージェントである Cline から ESLint の MCP サーバーを使用して、コードを生成する際に ESLint のルールに従うように指示してみましょう。「MCP Servers」から「Installed」タブを選択し、「Configure MCP Server」ボタンをクリックします。

MCP サーバーの設定ファイルが JSON 形式で表示されるので、以下のように eslint を追加します。

{
	"mcpServers": {
		"eslint": {
			"command": "npx",
			"args": ["eslint", "--mcp"],
			"env": {}
		}
	}
}

設定が正しく追加されていれば一覧に「eslint」が表示されます。

「プロジェクトの ESLint エラーを修正してください」というプロンプトを入力してみましょう。Cline は ESLint を実行するために MCP で提供されたツールを使用することを要求します。ツール lint-files をプロジェクトのファイルの一覧を引数に渡して実行しようとしています。

MCP サーバーからは以下のようなレスポンスが返ってきます。

Here are the results of running ESLint on the provided files: 
 
{"filePath":"/sapper-blog-app/packages/content-management/src/api.spec.ts","messages":\[],"suppressedMessages":\[{"ruleId":"@typescript-eslint/no-explicit-any","severity":2,"message":"Unexpected any. Specify a different type.","line":619,"column":49,"nodeType":"TSAnyKeyword","messageId":"unexpectedAny","endLine":619,"endColumn":52,"suggestions":\[{"messageId":"suggestUnknown","fix":{"range":\[15585,15588],"text":"unknown"},"desc":"Use \`unknown\` instead, this will force you to explicitly, and safely assert the type is correct."},{"messageId":"suggestNever","fix":{"range":\[15585,15588],"text":"never"},"desc":"Use \`never\` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."}],"suppressions":\[{"kind":"directive","justification":""}]},{"ruleId":"@typescript-eslint/no-explicit-any","severity":2,"message":"Unexpected any. Specify a different type.","line":678,"column":48,"nodeType":"TSAnyKeyword","messageId":"unexpectedAny","endLine":678,"endColumn":51,"suggestions":\[{"messageId":"suggestUnknown","fix":{"range":\[17129,17132],"text":"unknown"},"desc":"Use \`unknown\` instead, this will force you to explicitly, and safely assert the type is correct."},{"messageId":"suggestNever","fix":{"range":\[17129,17132],"text":"never"},"desc":"Use \`never\` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."}],"suppressions":\[{"kind":"directive","justification":""}]},{"ruleId":"@typescript-eslint/no-explicit-any","severity":2,"message":"Unexpected any. Specify a different type.","line":688,"column":49,"nodeType":"TSAnyKeyword","messageId":"unexpectedAny","endLine":688,"endColumn":52,"suggestions":\[{"messageId":"suggestUnknown","fix":{"range":\[17545,17548],"text":"unknown"},"desc":"Use \`unknown\` instead, this will force you to explicitly, and safely assert the type is correct."},{"messageId":"suggestNever","fix":{"range":\[17545,17548],"text":"never"},"desc":"Use \`never\` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."}],"suppressions":\[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":\[]} 
 
{"filePath":"/sapper-blog-app/packages/content-management/src/api.ts","messages":\[],"suppressedMessages":\[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":\[]}
 
{"filePath":"/sapper-blog-app/packages/content-management/src/datetime.spec.ts","messages":\[],"suppressedMessages":\[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":\[]}

ファイルパスごとに ESLint を実行した結果が JSON 形式で返ってきます。Cline はこの結果を元に ESLint のエラーを修正するためのコードを生成します。

まとめ

  • ESLint v9.26.0 から ESLint を MCP サーバーとして実行できるようになった
  • ESLint の MCP サーバーは lint-files ツールを提供している。lint-files ツールはファイルのパスを引数に取り、ESLint を実行して結果を返す
  • Cline などのコーディングエージェントは ESLint の MCP サーバーを使用してコードを修正することができる

参考

記事の理解度チェック

以下の問題に答えて、記事の理解を深めましょう。

ESLint の MCP サーバーが提供しているツールとして正しいものはどれですか?

  • lint-files

    正解!

    lint-files ツールはファイルのパスを引数に取り、ESLint を実行して結果を返します。

  • fix-issues

    もう一度考えてみましょう

  • explain-lint-issues

    もう一度考えてみましょう

  • lint-and-fix-files

    もう一度考えてみましょう