VS code 插件之中英文间自动添加空格

前言

不知道大家在开发过程中是不是会遇到写代码注释或者文本内容时中英文之间没有空格的情况很多时候在写代码尤其是写注释的时候容易忘记加空格但回过头来看又难以忍受于是我就想着自己写一个 vscode 插件来解决这个问题希望能帮到大家。

使用

我自己写了一个 vscode-auto-space 插件安装即用快速简单效果图如下图给有需要的人使用。

配置的话目前支持两个配置一个是自动打开的配置另一个是格式化文本类型的配置。

什么时候生效

当你保存文件的时候会默认帮助你格式化文本内容。

相关配置如下图

原理

给一些想要修改或者想要学习写插件的朋友简单讲解一下原理

首先写插件的格式就不多说了新手的话可以看看这个文档个人感觉入门了解个大概内容是没问题的至于更加全面的文档那还是得要去看官方文档虽然英文文档看起来很吃力但是还是推荐大家慢慢尝试着去看可能刚开始读起来很吃力要配合几个翻译软件一起但是当你阅读的多了慢慢也就流畅了。

项目起步的话直接用的是 antfu 大佬的 starter-vscode 模板一键启动省去配置的时间。

重点要说的就是实现了这个项目目的是要修改用户当前的文件那么我就要通过监听到文件的保存来执行对应的修改逻辑这里我使用的是onWillSaveTextDocument这个 API它会在文件保存前执行所以非常适合做保存文件前的逻辑操作。

当然这里会对用户的 config 进行判断如果开启才执行对应的 command于是这里又需要再监听用户的 config 修改事件当 enable字段修改执行对应的注销和执行操作。

讲完了执行的时机那么我们重点讲讲怎么自动加上空格的我们需要在注册command的时候区分两种情况:一种是全文档类型另一种则只是 comment。

1. 全文档类型的处理非常简单直接拿到当前的 text 文档然后对每一行进行分析并使用正则匹配到中英文后给其添加空格然后调用editor.edit API 直接进行 text 替换即可。

2. comment类型的处理则稍微难一点这里我们展开讲解下。

   • 使用各种语言的注释的正则匹配进行文本匹配把注释先提取出来

     // javascript java c++ c# php swift
     const commentRegex = ///.*|/*[\s\S]*?*//gm // 单行和多行
     // python
     const pythonRegex = /("""|''')([\s\S]*?)("""|''')|(#.*$)/gm
     // ruby
     const rubyRegex = /#\s*(.*)$/gm
     

   • 拿到 text 文档的所有comment的内容然后一一进行处理处理逻辑统一使用addSpaceChineseAndEnglish函数

   • 处理后进行文本更新这里更新的话需要依次更新这里有个坑就是计算位置就需要每次通过document.getText()拿到最新的 text 文档内容进行位置计算然后拿到range信息进行更新即可

总结

以上就是我关于这个写这个插件的所有内容。

最后如果本篇文章对大家有帮助的话希望大家能够点个赞点个关注鼓励下作者感谢。

当然有问题也欢迎讨论一起共同成长进步。