一些鲜为人知但功能强大的工具，可以集成到你的工作流程中。

介绍

Documatic

应用地图

网格布局

NPM 导入包链接

fig.io

结论

介绍

我们喜欢能够帮助我们提高生产力和效率的工具。这就是我制作这个Awesome tools for developers系列文章来讨论这类工具的原因。

今天，我将介绍一些鲜为人知但能帮助你提升工作效率的工具。这些工具可以轻松融入你的工作流程，从而显著提高效率。

我们开始吧。

Documatic

使用 Documatic 代码搜索轻松浏览大型代码库。

我们在加入新项目或参与开源项目时，都会遇到理解代码库的难题。我们有很多疑问，但能问的人却很少，而且回复往往需要时间。Documatic 的出现正是为了解决这些问题。

Documatic是一款代码搜索引擎，它会根据查询语句搜索代码库，并提供相关的代码片段。查询语句可以使用自然语言，无需包含任何技术术语。这在理解代码库时非常有用。

这个平台使用起来非常简单，你只需要将你的代码仓库连接到 Documatic 即可。他们支持连接 GitHub、BitBucket 和 GitLab 代码仓库。你可以在平台上搜索代码。你也可以使用他们的 VS Code 扩展程序直接在代码编辑器中进行搜索。点击此处查看 VS Code 扩展程序。

应用地图

AppMap 为开发者提供动态的运行时代码分析，可以直接在代码编辑器中进行。

它是一款开源代码可视化和分析工具，适用于您的项目。借助这些工具，您可以轻松找到需要修复的错误。它针对 Spring、Express、Django、Flask 和 Rails 进行了优化。

它记录代码执行轨迹，收集代码信息，然后将这些信息以交互式图表的形式呈现。您可以搜索并导航到这些图表。

它以 VS Code 和 JetBrains 扩展的形式提供。您可以从这里获取。

网格布局

快速设计网页布局，并获取 HTML 和 CSS 代码。通过我们的交互式 CSS 网格生成器，直观地学习 CSS 网格布局并构建网页布局。

这是一个面向开发者的 CSS 布局代码生成器。你可以在输入框中添加布局需求，也可以直接与网格交互，根据需要进行调整。这让它更加强大。

它支持隐式网格、区域框和网格放置。您还可以创建指向已创建网格布局的可共享链接。

您可以直接将此网格布局导入到您的在线 IDE 中，并在其上添加代码。它支持 CodePen、CodeSandbox 和 Stackblitz 等在线 IDE。

NPM 导入包链接

一个 Visual Studio 扩展，用于显示导入包的 NPM、Git 仓库（GitHub/GitLab 等）和主页链接。

我们总是需要在代码和官方文档之间来回切换，以便了解导入的包。每次编写代码时，都必须手动操作，这既繁琐又耗时，而且有时还需要手动查找官方网站/文档。而这个包的妙处就在于，它可以将所有重要的链接直接显示在编辑器中。

NPM 导入包链接是一个 VS Code 扩展，它能为 JavaScript 和 TypeScript 文件提供已导入包的快速链接。这些快速链接包含指向 NPM 页面、GitHub 仓库、NPM 主页以及问题/错误报告链接的链接。

安装 VS Code 扩展程序，然后将鼠标悬停在导入的包上即可查看快速链接。

fig.io

下一代命令行。

一款具备自动纠错功能的现代化终端。它支持超过 500 种常用的命令行工具，并能根据您的需求提供命令建议。例如，当您输入 `git git` 时git，它会自动建议所有与 Git 相关的常用命令。

您可以通过插件扩展功能。他们支持超过 400 个插件，可用于自定义和扩展功能。只需单击一下即可安装任何插件。

目前仅适用于 macOS，但您可以加入 Linux 和 Windows 操作系统的候补名单。

结论

我们已经介绍了 5 款符合您需求、有助于您工作流程的工具。我建议您尝试并将它们集成到您的工作流程中，以提高效率。

您也可以提及一些您使用过的、鲜为人知但功能强大的工具。期待您的评论。

希望这篇文章能帮助你了解一些提升生产力和效率的实用工具。感谢阅读这篇博文。

封面图片由Freepik 上的pikisuperstar 提供