「代码强迫症?」从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


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


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


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


吐槽 & 最初的设想


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


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


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

相关文章
|
2月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
125 1
|
25天前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
110 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
11天前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
|
2月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
72 5
vscode10大常用插件
|
22天前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
|
2月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
|
2月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
174 5
|
2月前
|
Java 数据安全/隐私保护
VScode将代码提交到远程服务器、同时解决每次提交都要输入密码的问题(这里以gitee为例子)
这篇文章介绍了如何在VSCode中将代码提交到Gitee远程服务器,并提供了解决每次提交都需要输入密码问题的方法。
VScode将代码提交到远程服务器、同时解决每次提交都要输入密码的问题(这里以gitee为例子)
|
2月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
239 1
|
2月前
|
C# C++
【Azure Function】在VS Code中创建Function项目遇见 No .NET worker runtimes found
【Azure Function】在VS Code中创建Function项目遇见 No .NET worker runtimes found
下一篇
无影云桌面