这是一个用来分析组件代码的工具。它支持 Vue
和 React
。访问 playground 或者试试 vscode 扩展 vue-hook-optimizer-ext。
# 克隆仓库并安装依赖
pnpm install
# 运行 playground
pnpm run play
打开浏览器并访问 http://localhost:3000/
.
-
把你的组件代码粘贴到编辑器中
-
点击
Analyze
按钮
这个工具会分析代码,并展示变量和方法之间的关联关系。这是一个简单的示例。
有时我们不得不重构代码,可能一个文件里有成千上万行代码。太复杂难以理解。
所以我想开发一个工具来帮助我们分析代码,并找出变量和方法之间的关联关系。我们可以发现一些变量是孤立的,一些方法是过度关联的,然后我们可以重构它们。
- 增加更多细信息, 包括变量类型、注释、是否在模板或者 hook 方法中被使用
- 提供优化建议
- 支持
options api
- vscode 扩展
- 支持
React
欢迎贡献代码,提交 PR。
如果你喜欢这个工具,请考虑支持我。我将继续努力开发这个工具,并添加更多功能。
MIT