Gimli

一个Visual Studio Code扩展，可为前端开发人员提供智能的可视化工具。

与其他视觉开发平台不同，Gimli面向前端开发人员。Gimli不是“无代码”解决方案。相反，它尝试将通常在“无代码”解决方案中找到的可视化工具与Visual Studio Code开发环境相结合。功能亮点：布局工具创建复杂的动态布局通常需要使用Grid和Flexbox。学习所有可能的属性以及它们如何相互影响可能是具有挑战性的。Gimli通过提供可大大简化此过程的可视化工具来解决此问题。Gimli可以根据选择的元素来启用布局工具。例如，如果某个元素的显示属性设置为grid，则将启用一组针对网格的工具。如果元素的父级的显示属性设置为flex，则将启用一组针对flex-item的工具，依此类推。...查找源使用Gimli的“查找源”功能轻松浏览文件。Gimli使您可以立即找到CSS规则和HTML元素的源代码。与任何框架或库一起使用就像浏览器的开发人员工具一样，Gimli旨在与您选择使用的任何框架或库一起使用。到目前为止，Gimli已通过React，WordPress，Bootstrap，VueJS，Angular和Stencil进行了测试。应用样式无需复制和粘贴样式。通过使用Gimli的“应用样式”功能，您可以查看已添加，删除或更改的样式。然后，您可以应用所有或部分样式。以上只是即将发生的事情的先睹为快。上面您看到的是实际起作用的已实现功能。如果有时间和资源，我希望能够继续改进现有功能并实现新功能，例如：•排版和文本工具•导入自定义代码片段•转换和透视图工具•HTML导出和格式设置•DOM树视图•颜色和商标工具