每个前端开发都会到遇到的 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 FormatterJSONLintJSON 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