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


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


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


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


吐槽 & 最初的设想


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


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


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

相关文章
|
27天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
195 2
|
9天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
110 4
|
7天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
22 1
|
14天前
|
前端开发 JavaScript 数据库
VSCode编程助手工程能力体验报告(一):通义灵码 - 帮你高效切入新项目、编码和提升质量
我是一位软件工程师,用通义灵码个人版vscode插件的workspace做项目分析和复盘,对比之前没有灵码,现在提效了80%,本文介绍了具体的使用流程。
|
17天前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
131 3
|
2月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
248 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
20天前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
42 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
25天前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
20 2
|
26天前
|
Ubuntu Linux 编译器
Linux/Ubuntu下使用VS Code配置C/C++项目环境调用OpenCV
通过以上步骤,您已经成功在Ubuntu系统下的VS Code中配置了C/C++项目环境,并能够调用OpenCV库进行开发。请确保每一步都按照您的系统实际情况进行适当调整。
209 3
|
23天前
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
205 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。