「代码强迫症?」从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月前
|
人工智能 C++ iOS开发
ollama + qwen2.5-coder + VS Code + Continue 实现本地AI 辅助写代码
本文介绍在Apple M4 MacOS环境下搭建Ollama和qwen2.5-coder模型的过程。首先通过官网或Brew安装Ollama,然后下载qwen2.5-coder模型,可通过终端命令`ollama run qwen2.5-coder`启动模型进行测试。最后,在VS Code中安装Continue插件,并配置qwen2.5-coder模型用于代码开发辅助。
2296 5
|
1月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
270 2
|
1月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
470 4
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
148 1
|
2月前
|
前端开发 JavaScript 数据库
VSCode编程助手工程能力体验报告(一):通义灵码 - 帮你高效切入新项目、编码和提升质量
我是一位软件工程师,用通义灵码个人版vscode插件的workspace做项目分析和复盘,对比之前没有灵码,现在提效了80%,本文介绍了具体的使用流程。
145 2
|
2月前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
614 3
|
2月前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
304 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
2月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
288 2