最新

我构建了一个库，允许你使用熟悉的类似CSS的选择器来查找代码模式，并通过MCP将其连接到Claude，以便AI助手能够理解和重构代码库。 <p>方法</p> <p>通过直观的选择器查找代码模式：</p> <pre><code>const asyncFunctions = tree.findAll('function[async]');</code></pre> <pre><code>const todoComments = tree.findAll('comment[text<i>="TODO"]');</code></pre> <pre><code>const reactHooks = tree.hooks(); // 内置的React支持</code></pre> <p>链式智能转换：</p> <pre><code>tree.transform() .rename('oldFunction', 'newFunction') .removeUnusedImports() .toString();</code></pre> <p>主要特性</p> <pre><code> - 类CSS选择器：function[async]，class:has(method)，call[text*="fetch"] - 语义别名：函数匹配声明、表达式、箭头函数和方法 - 智能转换：重命名标识符，移除未使用的导入，插入代码 - 内置查询：函数、类、导入、React钩子、JSX组件 - TypeScript支持：完整的参数提取及类型 - 范围分析：跟踪变量绑定和引用 </code></pre> -- MCP -- <p>我构建了一个MCP服务器，将这些功能暴露给AI助手。你可以告诉Claude：</p> <pre><code> "查找所有使用console.log的函数，并显示它们的参数"</code></pre> <p>而Claude可以：</p> <ol> <li>解析你的代码库</li> <li>使用 <code>find_all_pattern('function:has(call[text="console.log"])')</code></li> <li>提取带有类型的参数信息</li> <li>提供详细分析</li> </ol> <p>技术细节</p> <pre><code> - 基于tree-sitter构建，确保正确性和性能 - 13个MCP工具用于全面的代码分析 - 支持JavaScript、TypeScript、JSX、TSX - 模式解析器将CSS选择器转换为AST谓词 - 有状态的MCP服务器维护分析上下文 </code></pre> <p>链接：</p> <pre><code> - 库： https://github.com/qckfx/tree-hugger-js - MCP服务器： https://github.com/qckfx/tree-hugger-js-mcp - NPM： npm install tree-hugger-js - Claude代码： claude mcp add tree-hugger-js-mcp npx tree-hugger-js-mcp </code></pre> 期待来自社区的反馈，尤其是关于MCP的部分。