Tree Hugger Js MCP

🚀 Tree-Hugger-JS MCP Server

Tree-Hugger-JS MCP Server是一个MCP（模型上下文协议）服务器，它借助tree-hugger-js库，为AI代理提供强大的JavaScript/TypeScript代码分析和转换能力。

🚀 快速开始

你可以使用npx立即尝试，无需安装：

# 配合Claude Code或任何MCP客户端使用
npx tree-hugger-js-mcp

✨ 主要特性

🔍 代码分析

• 解析JavaScript、TypeScript、JSX和TSX文件或代码字符串。
• 使用直观的语法（例如function、class[name="MyClass"]）查找模式。
• 提取函数、类和导入，并附带详细的元数据。
• 遍历抽象语法树（AST）节点并分析代码结构。
• 获取特定位置的节点。

🔧 代码转换

• 重命名代码中的标识符。
• 移除未使用的导入。
• 链式执行多个转换操作。
• 在匹配模式的前后插入代码。
• 在应用转换之前预览转换效果。

📊 代码智能

• 作用域分析和变量绑定。
• 使用类似CSS的选择器进行模式匹配。
• 支持异步函数、类和方法。
• 处理TypeScript类型导入。

📦 安装指南

📦 全局安装

# 全局安装以便重复使用
npm install -g tree-hugger-js-mcp

# 然后可在任何位置运行
tree-hugger-js-mcp

🔧 开发环境设置

# 从源代码克隆并构建
git clone https://github.com/qckfx/tree-hugger-js-mcp.git
cd tree-hugger-js-mcp
npm install
npm run build
npm start

📚 详细文档

MCP客户端配置

与Claude Code配合使用

添加到你的MCP客户端配置中：

{
  "mcpServers": {
    "tree-hugger-js": {
      "command": "npx",
      "args": ["tree-hugger-js-mcp"]
    }
  }
}

其他配置

{
  "mcpServers": {
    "tree-hugger-js": {
      // 如果是全局安装
      "command": "tree-hugger-js-mcp",
      
      // 或者如果是从源代码构建
      "command": "node",
      "args": ["/path/to/tree-hugger-js-mcp/build/index.js"]
    }
  }
}

工具说明

代码分析工具

parse_code

从文件或字符串解析JavaScript/TypeScript代码。 参数：

• source（字符串）：要解析的文件路径或代码字符串。
• isFilePath（布尔值，可选）：源是否为文件路径（如果未提供则自动检测）。
• language（字符串，可选）：要使用的语言（javascript、typescript、jsx、tsx）。

示例：

// 解析文件
await callTool("parse_code", { 
  source: "./src/app.js",
  isFilePath: true 
});

// 解析代码字符串
await callTool("parse_code", { 
  source: "function hello() { console.log('world'); }" 
});

find_pattern

查找第一个匹配模式的节点。 参数：

• pattern（字符串）：使用tree-hugger-js语法匹配的模式。

示例：

// 查找任何函数
await callTool("find_pattern", { pattern: "function" });

// 查找异步函数
await callTool("find_pattern", { pattern: "function[async]" });

// 按名称查找类
await callTool("find_pattern", { pattern: "class[name='MyClass']" });

find_all_pattern

查找所有匹配模式的节点。 参数：

• pattern（字符串）：要匹配的模式。
• limit（数字，可选）：返回的最大匹配数。

get_functions

获取所有函数的详细信息。 参数：

• includeAnonymous（布尔值，可选）：是否包含匿名函数（默认值：true）。
• asyncOnly（布尔值，可选）：是否仅返回异步函数（默认值：false）。

get_classes

获取所有类及其方法和属性。 参数：

• includeProperties（布尔值，可选）：是否包含类属性（默认值：true）。
• includeMethods（布尔值，可选）：是否包含类方法（默认值：true）。

get_imports

获取所有导入语句。 参数：

• includeTypeImports（布尔值，可选）：是否包含TypeScript仅类型导入（默认值：true）。

代码转换工具

rename_identifier

重命名标识符的所有出现位置。 参数：

• oldName（字符串）：当前标识符名称。
• newName（字符串）：新的标识符名称。
• preview（布尔值，可选）：是否仅返回预览（默认值：false）。

示例：

await callTool("rename_identifier", {
  oldName: "fetchData",
  newName: "fetchUserData",
  preview: true
});

remove_unused_imports

移除未使用的导入语句。 参数：

• preview（布尔值，可选）：是否仅返回预览（默认值：false）。

transform_code

按顺序应用多个转换操作。 参数：

• operations（数组）：转换操作数组。
• preview（布尔值，可选）：是否仅返回预览（默认值：false）。

示例：

await callTool("transform_code", {
  operations: [
    { type: "rename", parameters: { oldName: "oldFunc", newName: "newFunc" } },
    { type: "removeUnusedImports" },
    { type: "replaceIn", parameters: { nodeType: "string", pattern: /localhost/g, replacement: "api.example.com" } }
  ],
  preview: true
});

insert_code

在匹配模式的节点前后插入代码。 参数：

• pattern（字符串）：用于插入点的匹配模式。
• code（字符串）：要插入的代码。
• position（字符串）："before" 或 "after"。
• preview（布尔值，可选）：是否仅返回预览（默认值：false）。

导航工具

get_node_at_position

获取特定行和列位置的AST节点。 参数：

• line（数字）：行号（从1开始）。
• column（数字）：列号（从0开始）。

analyze_scopes

分析变量作用域和绑定。 参数：

• includeBuiltins（布尔值，可选）：是否包含内置标识符（默认值：false）。

资源

服务器提供三种资源用于访问内部状态：

ast://current

当前解析的AST状态，包含元数据和统计信息。

ast://analysis

最近一次代码分析的结果（函数、类、导入）。

ast://transforms

代码转换历史和可用操作。

模式语法

tree-hugger-js使用直观的模式，而不是冗长的tree-sitter节点类型：

基本模式

• function - 任何函数（声明、表达式、箭头函数、方法）。
• class - 类声明和表达式。
• string - 字符串和模板字面量。
• import/export - 导入/导出语句。
• call - 函数调用。
• loop - for、while、do-while循环。

属性选择器

• [name="foo"] - 具有特定名称的节点。
• [async] - 异步函数。
• [text*="test"] - 包含特定文本的节点。

类似CSS的选择器

• class method - 类内部的方法。
• function > return - 直接在函数内部的返回语句。
• :has() 和 :not() 伪选择器。

💻 使用示例

基础代码分析

// 解析并分析一个React组件
await callTool("parse_code", { source: "./components/UserProfile.jsx" });

// 获取所有函数
const functions = await callTool("get_functions", { asyncOnly: true });

// 查找JSX元素
const jsxElements = await callTool("find_all_pattern", { pattern: "jsx" });

代码重构

// 重命名函数并移除未使用的导入
await callTool("transform_code", {
  operations: [
    { type: "rename", parameters: { oldName: "getUserData", newName: "fetchUserProfile" } },
    { type: "removeUnusedImports" }
  ]
});

模式匹配

// 查找所有调用console.log的异步函数
await callTool("find_all_pattern", { 
  pattern: "function[async]:has(call[text*='console.log'])" 
});

// 查找具有构造函数的类
await callTool("find_all_pattern", { 
  pattern: "class:has(method[name='constructor'])" 
});

开发

# 安装依赖
npm install

# 构建项目
npm run build

# 开发模式（监听文件变化）
npm run dev

# 使用MCP检查器进行测试
npm run inspector

错误处理

服务器提供详细的错误消息和建议：

• 无效文件路径的文件未找到错误。
• 带有有用上下文的解析错误。
• 带有建议的模式匹配错误。
• 具有回滚功能的转换错误。

📄 许可证

本项目采用MIT许可证。