展示HN：Tree-hugger-JS：用于JavaScript AST分析和MCP的CSS选择器
我构建了一个库，允许你使用熟悉的类似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的部分。
查看原文
I built a library that lets you find code patterns using familiar CSS-like selectors, then connected it to Claude via MCP so AI assistants can understand and refactor codebases.<p>The Approach<p>// Find code patterns with intuitive selectors:<p>const asyncFunctions = tree.findAll('function[async]');<p>const todoComments = tree.findAll('comment[text<i>="TODO"]');<p>const reactHooks = tree.hooks(); // Built-in React support<p>// Chain smart transformations:<p>tree.transform()
.rename('oldFunction', 'newFunction')
.removeUnusedImports()
.toString();<p>Key Features<p><pre><code> - CSS-like selectors: function[async], class:has(method), call[text*="fetch"]
- Semantic aliases: function matches declarations, expressions, arrows, and methods
- Smart transformations: Rename identifiers, remove unused imports, insert code
- Built-in queries: functions, classes, imports, React hooks, JSX components
- TypeScript support: Full parameter extraction with types
- Scope analysis: Track variable bindings and references
</code></pre>
-- MCP --<p>I built an MCP server that exposes these capabilities to AI assistants. You can tell Claude:<p><pre><code> "Find all functions that use console.log and show me their parameters"
</code></pre>
And Claude can:<p>1. Parse your codebase<p>2. Use
find_all_pattern('function:has(call[text</i>="console.log"])')<p>3. Extract parameter information with types<p>4. Give you detailed analysis<p>Technical Details<p><pre><code> - Built on tree-sitter for correctness and performance
- 13 MCP tools for comprehensive code analysis
- Supports JavaScript, TypeScript, JSX, TSX
- Pattern parser converts CSS selectors to AST predicates
- Stateful MCP server maintains analysis context
</code></pre>
Links:<p><pre><code> - Library: https://github.com/qckfx/tree-hugger-js
- MCP Server: https://github.com/qckfx/tree-hugger-js-mcp
- NPM: npm install tree-hugger-js
- Claude Code: claude mcp add tree-hugger-js-mcp npx tree-hugger-js-mcp
</code></pre>
Would love feedback from the community, especially on the MCP.