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信息进行更新即可

总结

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

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

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