「代码强迫症?」从0到1实现项目代码拼写检查 vscode 插件:project-spell-checker(一)

简介: 「代码强迫症?」从0到1实现项目代码拼写检查 vscode 插件:project-spell-checker(一)

背景介绍


其实我一直是个代码强迫症患者,我之前写过两篇关于代码整洁的文章


其实上面两篇文章我更加聚焦的是如何设计并编写代码逻辑以让代码更加清晰易懂。虽然优秀的命名,优秀的封装等等都可以让代码更加易读,但是我们也常常面临一个更加“基础向”的问题,就是拼写错误。


拼写错误虽然看似不那么“重大”,但是也可以造成很多难以预料的问题,比如:


  • 引入意料之外且难以定位的 bug
  • 代码语义不清,接手开发者难以通过错误的拼写理解程序的语义
  • 正确与错误的拼写交织,相当于一个术语存在多个单词对应,加重维护负担
  • ...


但是我们也是肉体凡胎,很难去保证我们的代码产出没有任何拼写错误,所以 Code Spell Checker 插件有 4,216,410 的超高下载量。这个插件可以做到在我们编码过程中及时纠正我们的拼写错误,十分的方便。


然而,之前在团队做 code review 的过程中发现了一些拼写错误的情况发生,而且在查看项目老代码的过程中也发现了很多的拼写错误,所以作为一个代码强迫症患者,我就试图通过一些手段,让项目中所有的拼写错误呈现在我的面前。


即使不去修改,我也想看一看整个项目拼写错误的情况,进行一下数据的统计分析。


于是我这次在清明节假期,花了一天时间(其实不止...我只是在吹牛逼)从 0 到 1 开发了一个 vscode 插件:Project Spell Checker,以辅助我检查并统计项目中所有的拼写错误。


该插件已上架 vscode 插件商店~


那么下一章节,我将为大家介绍本插件的具体功能。


功能介绍


网络异常,图片无法展示
|


project-spell-checker 是具备自定义能力并完成全项目拼写检查的 vscode 插件, 具体能力分为三个:

  • 通过配置文件自定义插件扫描的文件范围
  • 通过 tree-view 显示各文件下的疑似拼写错误,并提示最多六个正确单词猜想
  • 通过 web-view 显示各个疑似拼写错误出现在哪些文件

提示:tree-viewweb-view 均支持文件的快捷跳转


配置文件


配置文件 spell-checker-config.json 可以放置于 .vscode 或者 .project 目录下,插件会自动读取,新建文件后输入:project-spell-checker 按下 tab ,可以自动生成配置文件模板内容:


网络异常,图片无法展示
|


  • excludedFloders: 不进行扫描的目录名
  • includedFileSubfixes:需要扫描的文件后缀名
  • excludedFileNames:不进行扫描的文件名
  • whiteList:单词白名单(支持字符串数组以及 , 分割的字符串)


视图


插件上面存在两个按钮:

  • 按钮一:形如统计图的按钮用来扫描并打开 web-view
  • 按钮二:形如刷新的按钮用来扫描并打开 tree-view


网络异常,图片无法展示
|

tree-view


树视图的展示维度为:文件 -> 疑似拼写错误

树形结构格式基本为:


|- fileName-[suspected spelling mistake count]
|-- mistake1 -✓-> spelling suggestions OR :(
|-- mistake2 -✓-> spelling suggestions OR :(
|-- mistake3 -✓-> spelling suggestions OR :(
|-- mistake4 -✓-> spelling suggestions OR :(


可以点击文件名以进行跳转


web-view

页面视图的展示维度为:

疑似拼写错误 -> 文件

树形结构格式基本为:


----|- mistake1     - file-path1
                      - file-path2
root----|- mistake2     - file-path3
    ----|- mistake3     - file-path4


因为上面的概览不一定能让大家认识到这个树形结构如何,于是截了一个图,展示效果为:


网络异常,图片无法展示
|


可以点击文件名以进行跳转


吐槽 & 最初的设想


这是我在开发之前规划的需求清单:


网络异常,图片无法展示
|


未来其实我还想加入文件名的拼写检查,以及对疑似拼写错误的勾选批量修改。

相关文章
|
1月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
|
12天前
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
|
3月前
|
人工智能 JavaScript 程序员
Fitten Code:在VSCode插件市场备受欢迎的原因是什么?
随着AI技术的不断发展,AI在编写代码方面的能力也日益强大。充分利用AI的能力能够显著提高代码编写的效率和质量。今天我将向大家介绍一款备受瞩目的AI代码神器——Fitten Code,让我们一同揭开它神秘的面纱!
250 3
|
12天前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
|
1月前
|
NoSQL 关系型数据库 开发工具
最新最全 VSCODE 插件推荐(2023版)
最新最全 VSCODE 插件推荐(2023版)
103 0
|
1月前
|
Java
VSCode 插件Code Runner 中文提示乱码
VSCode 插件Code Runner 中文提示乱码
|
1月前
|
开发者
|
1月前
|
JavaScript 前端开发 程序员
非专业程序员常用vscode插件
这里的vscode插件, 有四分之一你没用过, 这里的vscode设置, 80%你没设置过, 挖宝随缘
47 5
|
2月前
|
Web App开发 JavaScript 前端开发
推荐常用的VSCode插件
推荐常用的VSCode插件
75 2
|
3月前
|
JSON JavaScript 前端开发
TypeScript笔记(2)—— 使用VSCode实时编译TypeScript代码
TypeScript笔记(2)—— 使用VSCode实时编译TypeScript代码
45 0