5 个可以提高你工作效率的 Web 开发工具

对于开发者来说，时间始终是一种稀缺资源。从紧迫的截止日期，到多个项目，再到意想不到的需求，我们的时间总是捉襟见肘。正因如此，我们一直在寻找能够提升生产力的工具和流程。在本文中，我们将介绍五款或许能助您额外提升生产力的 Web 开发工具。

1. 使用Oh My Zsh掌握命令行

Windows 和 OS X 的默认命令行界面（命令提示符和Bash）可能难以学习且难以自定义。如果您不是专家，最终可能会重复执行一些可以自动化的琐碎任务。

Oh My Zsh是一个开源的、社区驱动的框架，它基于zsh 构建而成——zsh 是一个命令行 shell，许多人认为它比默认选项更易于使用且性能更佳。Oh My Zsh 提供了大量开箱即用的插件（250 个）和主题（140 个），让您可以根据自己的喜好自定义终端。Oh My Zsh 速度更快，使用起来更舒适，并且可以轻松地自动化您的日常任务。由于命令行正日益成为每个 Web 开发人员工作流程的一部分，因此 Oh My Zsh 可以成为您日常工作中一个非常棒的生产力工具。

在您的计算机上安装 Oh My Zsh 非常简单……

 

$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"  

就像安装插件和自定义主题一样。

Oh My Zish 还拥有一个庞大而活跃的贡献者社区。事实上，已有超过1,500 人为该项目做出了贡献。

我已经使用这个工具一年多了，它简化了我的工作流程，让我在终端中操作更加轻松，我非常喜欢。使用 Oh My Zsh 让我在命令行上更加得心应手，效率也更高。自动建议和别名功能尤其加快了我的工作流程，提高了我的工作效率。我最喜欢的插件包括：

• heroku： Heroku CLI的自动完成功能
• zsh-autosuggestions：自动建议任何先前的命令
• npm： npm的自动完成和别名

2. 使用Insomnia动态测试 API

测试 REST 端点可能既繁琐又耗时，而且容易让人困惑。Insomnia 是一款免费开源的跨平台 GraphQL 和 REST 客户端，它不仅功能强大，还拥有直观简洁的用户界面，让测试更加轻松，简化了我的日常工作。Insomnia 的一些功能包括：

• 代码片段生成：Insomnia 可以为超过 20 种不同的语言生成客户端代码，包括 NodeJS、Go、Swift、Python、Java、C。
• 插件系统：插件系统允许您扩展 Insomnia 的功能。您可以创建自定义模板标签来渲染自定义值，或者使用插件 API创建自定义颜色主题。
• 环境变量：这些是可重复使用的值，可用于 Insomnia 中的任何文本输入。一些常见的变量包括基础 URL、身份验证令牌和资源 ID。

Insomnia 的主要优势之一是支持 GraphQL。下面的演示展示了查询 GraphQL 端点的典型工作流程。在本例中，我使用名为“countries”的公共 GraphQL API 发送请求。Insomnia 会在传递 URL 时自动生成架构。在左侧发送查询后，它会在右侧返回响应。

该应用程序附带许多实用功能，可以简化您的工作流程。例如，这里我们可以看到使用环境变量的功能。

使用 API 时，在多个请求中重复相同的值是很常见的。手动执行此任务可能既耗时又困难。使用环境变量可以解决这个问题，因为它允许您定义一个值，然后在需要的地方引用该值。

3. 使用Hub增强 Git 超级能力

我们大多数人都会在GitHub上花费大量时间。Hub 是一个命令行工具，可以帮助您执行日常的 GitHub 任务，而无需频繁地在终端之间来回切换。Hub 对 git 进行了封装，并扩展了其额外功能，包括克隆仓库、列出最新的未解决问题以及通过 Gist 共享日志或代码片段。Hub 不仅简化了 GitHub 的使用，还通过将所有工具整合到一个环境中来提高工作效率。

您可以使用 Hub 执行大量命令和操作。以下是完整的安装命令列表man hub。您也可以通过在终端上运行命令来查看该列表。

4. 使用DevDocs访问离线文档

我们每个人都会用到文档。（有些人用得还挺多！）当你使用多种技术栈时，不断地在不同的文档之间切换会非常耗时，而且很不方便。DevDocs解决了这个问题。DevDocs 是一款免费的开源工具，可以在一个简洁、有序的 Web 界面中同时浏览各种编程语言和开发工具的文档。

DevDocs 提供：

• 即时搜索
• 离线支持
• 移动支持
• 黑暗主题
• 键盘快捷键
• 以及更多

DevDocs 让阅读和搜索参考文档变得快速、轻松、便捷且充满乐趣。它支持超过 150 个可离线使用的项目，让您无需担心网络连接问题。在使用多种语言或工具时，这款工具尤其实用。例如，我经常使用它来同时阅读和搜索 Vue 和 Cypress 的文档。

5. 使用SVGOMG缩放 SVG 图像

最后，我们来谈谈一个更实用的工具——SVGOMG——一款用于优化 SVG 文件的免费在线工具。SVG（可缩放矢量图形）图像比其他格式（例如 PNG 或 JPG）更受欢迎，因为它们能够缩放并在各种设备和屏幕尺寸上保持响应。使用 SVG 的一个缺点是，由于冗余信息（例如编辑器元数据、注释、隐藏元素以及默认或非最佳值），文件可能会变得非常大。SVGOMG 是一款可以安全地删除和优化这些数据以减小文件大小的工具。

上图展示了一个典型的场景，其中 SVG 文件优化了 69.42%。这是一个非常简单的工具，但它可以帮助提升网站的整体性能，并避免网页臃肿。SVGOMG是SVGO （Optimizer）的 UI 实现，而 SVGO（Optimizer）是一个基于 Node.js 的命令行工具。

结论

寻找改进工作方式的方法至关重要。利用上述工具，您可以提高工作效率并简化工作流程。开始优先考虑那些有助于自动化工作流程的工具，您将获得节省时间并提高工作效率的回报。