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許可證。