每个前端开发都会到遇到的 3 个问题及工具

最近我调研了 He3 前端同学日常的开发工作，他们总结了 3 个开发过程经常遇到的问题：

  1. JSON 格式化和校验的问题
  2. 正则表达式的编写和校验问题
  3. 获取剪切板历史记录的问题

这 3 个问题非常具有代表性，我相信大部分人的解决办法是通过百度或 Google 搜索临时工具来解决，但这些工具质量参差不齐，长期可用性也较差。 接下来，我们将深入探讨上面 3 个常见的问题以及工具，同时在文末邀请您对 He3 计划开发的剪切板工具提出建议。

JSON 格式化

在前端开发中，处理接口数据、存储数据和传输数据时，常常遇到无序的 JSON 字符串，这给开发和调试带来了很大的麻烦。为了解决这个问题，开发者可以使用 JSON 格式化工具将无序的 JSON 字符串快速转换为易读的格式，方便理解和处理数据。 JSON 是前后端数据交互中的常用数据格式。JSON 格式化操作可以帮助开发者更好地查看和理解 JSON 数据，提高开发效率和数据传输的准确性，JSON 格式化工具可以实现以下目标：

  1. 美化 JSON 数据：一般情况，从后端获取的数据是压缩后的 JSON 字符串，没有按照键值对的形式排列，难以直观地看出数据结构。格式化后的 JSON 数据更为易读，包含缩进层级，方便开发者快速定位数据结构。
  2. 校验 JSON 数据：JSON 格式化工具还可以帮助开发者校验 JSON 数据的合法性。当 JSON 数据格式不正确时，JSON 格式化工具会提示错误信息，方便开发者及时发现和纠正问题。
  3. 转换 JSON 数据：有时候，需要将 JSON 数据转换为其他格式，例如 CSV、XML 等。 常见的 JSON 格式化工具包括 JSON Formatter、JSONLint、JSON Viewer 等，IDE 中常见的 JSON 格式化插件包括 VS Code 的 Prettier 和 ESLint 等，这些工具的免费版一般支持不超过 50 个记录、200 个节点、1000 个字符，其余功能需要付费解锁，部分不支持自定义参数。 1_1

上图是深受前端开发者喜爱的 JSON Formatter，它在使用过程中无法解决 JSON 数据本身的错误，只能解决格式上的问题，而对于缺少引号或不规范的代码，JSON Formatter 表现欠佳。

而 He3 JSON Format 工具除了具备 JSON 错误提示以外，甚至还能够兼容 JSON 格式错误的情况：https://t.he3app.com?5p3h 1_2

此外，He3 还提供了近 40 款与 JSON 相关的工具包，涵盖了 JSON 转主流语言的结构体以及接口，例如：

  1. JSON to Go Struct(https://t.he3app.com?qdiv)
  2. JSON to Kotlin Class(https://t.he3app.com?mt6g)
  3. JSON to JAVA Bean(https://t.he3app.com?d5ik)
  4. JSON to Python Class(https://t.he3app.com?cezo)
  5. JSON Merge(https://t.he3app.com?mbvq)

1_3

1_4

正则表达式

对于前端而言，正则表达式的应用场景有以下几个：

  1. 表单验证：在前端开发中，常常需要验证用户输入的表单数据，例如邮箱、手机号码、密码等。可以使用正则表达式来验证这些数据的格式是否正确。
  2. 文本搜索：在文本编辑器或代码编辑器中，可以使用正则表达式来进行文本搜索。例如，在代码中搜索所有包含某个特定字符串的代码块，或在日志文件中搜索某个时间段的日志记录等。
  3. URL 路由：在 Web 应用程序中，URL 路由是一个重要的概念。可以使用正则表达式来定义 URL 路由规则，以实现 URL 路由功能。
  4. 编程语言中的字符串处理：在编程语言中，字符串处理是一个常见的任务。可以使用正则表达式来处理字符串，例如搜索、替换、匹配等。 RegExr 是一个不错的正则表达式工具，它支持实时匹配和可视化展示匹配结果，还有实用的正则表达式参考资料，深受前端开发者的喜爱。 但是正则表达式语法非常复杂，有很多不同的规则和语法结构，由于 RegExr 并不能支持所有的正则表达式语法，因此在某些情况下，测试结果可能会出现误差。 例如，如果使用 RegExr 进行一个包含捕获分组的复杂正则表达式的测试，如果其中包含某些特定的语法结构，可能会导致测试结果不准确。这可能会让开发者误以为自己的正则表达式是正确的，而在实际应用中出现错误。 2_1

相比较 RegExr，He3 目前提供了两个正则表达式相关工具：

  1. Regex Reference
  2. Regex Tester

其中，Regex Reference 工具提供了一些几十种常用的正则表达式可供参考：https://t.he3app.com?8fs9

2_2

而 He3 Regex Tester 工具除了能够根据正则匹配字符串以外，同时还支持替换字符串的模式：https://t.he3app.com?lqes 2_3

此外，He3 Regex Tester 额外还提供正则表达式的图解，让你一目了然理解当前正则表达式的工作原理：https://t.he3app.com?lqes 2_4

剪贴板管理

开发者在使用 Mac、Windows 进行前端开发工作时，经常会遇到需要频繁复制、剪切、粘贴文本的情况。但是默认的剪贴板功能只能存储一个文本剪贴板，当进行多次复制和剪切操作后，前面的文本内容就会被覆盖，Windows 系统有虽然自己的剪贴板记录功能，但对图片也不适用。 为了解决这个问题，一些第三方剪贴板管理工具应运而生，例如 Alfred、ClipMenu、CopyClip 等。这些工具可以记录多个剪贴板内容，并允许用户访问之前保存的文本内容。 在众多剪切板工具中，Paste 是开发者比较喜欢的一款工具，它支持多种剪切板类型，如文本、图像、文件、代码等，同时还具备搜索功能。美中不足的是，Paste 是一款收费软件，需要付费购买使用。

3_1

He3 目前正在计划开发一款剪贴板管理的小工具，作为 He3 全域开发功能工具箱的重要一员，这款工具将具备以下特性：

  • 文件预览
  • 剪切板内容识别和语义分析
  • He3 工具推荐和联动
  • 云上存储
  • 剪切板历史
  • 图片预览 最重要的是，免费！如果你对剪切板工具有更多诉求，欢迎参加我们的讨论：https://github.com/he3-app/he3-feedback/discussions/128