背景介绍
其实我一直是个代码强迫症患者,我之前写过两篇关于代码整洁的文章
其实上面两篇文章我更加聚焦的是如何设计并编写代码逻辑以让代码更加清晰易懂。虽然优秀的命名,优秀的封装等等都可以让代码更加易读,但是我们也常常面临一个更加“基础向”的问题,就是拼写错误。
拼写错误虽然看似不那么“重大”,但是也可以造成很多难以预料的问题,比如:
- 引入意料之外且难以定位的
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-view
与 web-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
因为上面的概览不一定能让大家认识到这个树形结构如何,于是截了一个图,展示效果为:
可以点击文件名以进行跳转
吐槽 & 最初的设想
这是我在开发之前规划的需求清单:
未来其实我还想加入文件名的拼写检查,以及对疑似拼写错误的勾选批量修改。