Tree Hugger Js MCP

🚀 Tree-Hugger-JS MCP 服务器

Tree-Hugger-JS 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 类型导入。

📦 安装指南

🚀 快速开始（推荐）

使用 npx 立即试用，无需安装：

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

📦 全局安装

# 全局安装以便重复使用
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"]
    }
  }
}

工具

代码分析工具

代码转换工具

导航工具

资源

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

• ast://current：当前解析的 AST 状态，包含元数据和统计信息。
• ast://analysis：最近一次代码分析的结果（函数、类、导入）。
• ast://transforms：代码转换历史和可用操作。

模式语法

tree-hugger-js 使用直观的模式，而非冗长的树解析器节点类型：

基本模式

• 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 许可证。