曾经闲着无聊写了个感觉没什么用的VS Code插件,因为一个issue而发现了新的作用

231 阅读3分钟

事情起因

插件的开发

大约半年前,我写了一个VS Code插件,叫character-conversion,我的开发初衷是为了将=>这样的连在一起字符在外观上替换成这样的单个箭头符号,达到和连字体(免费连字体哪家强?最全连字体盘点)类似的效果。

没花多少工夫,我就把功能完成了,效果大致如下:

cc_01.gif

虽然效果比连字体要稍差一些,但也有一个好处,那就是可以自定义箭头样式,甚至可以是emoji:

cc_02.png

为了功能更加通用,通过添加自定义配置项,还可以将任意字符在替换成其他任意字符,所以我才将插件取名为Character Conversion,并最终将其发布至插件市场。

完成以后,我就没再管过这个插件了,也没指望会有人用。

事实也正是如此,过去半年,下载量也没有超过300次。

一个issue引发的思考

但没想到的是,前几天我收到了一个issue:How do I disable some convertions? · Issue #1

插件默认提供了对四个字符的转换:=>>=!=<=,有人提问说能不能只替换箭头,禁用其他三个。

由于我当时纯粹是闲着无聊才写了这个插件,没考虑过这个问题,但既然有需求,而且问题也不难搞定,所以还是帮解决一下吧。

同时我也说了,我原本是没打算继续维护这个插件的,建议对方最好使用含有连字符的字体。

但对方却表示很喜欢这个插件,没有担心过这个问题。

虽然有点疑惑,但我也没好意思继续问对方为什么喜欢,说不定人家就是客气一下呢?

所以,我决定自己摸索一下它是不是有什么其他的作用。

我自己都没想到的玩法

折叠HTML内联属性

折叠内联属性在使用TailwindCSS、UnoCSS之类的CSS原子类时非常有用,虽然也有其他插件能做到类似的效果,但在此之前我完全没想过这个插件也能这么用。

效果如下:

cc_03.gif

只需在settigns.json中添加配置:

"characterConversion.rules": [
    [
        ".+?=\\\"([^\\\"\\n]{20,}?)\\\"",
        "◦◦◦",
        1
    ]
],

配置项是一个二维数组,每个数组有三项,第一项是匹配的正则表达式,第二项是替换后的字符,第三项是可选的正则表达式Group,默认值是0。

这里的意思就是当HTML属性的字符数超过20个,就将内容折叠为三个点,注意引号要用\转义,而\本身也需要转义,所以\"就得写成\\\"

标记特殊的单词

例如,在所有的TODO前添加一个感叹号

cc_04.png

"characterConversion.rules": [
    [
        "TODO",
        "⚠️TODO"
    ]
],

单个字符替换

例如,所有形如a * b形式的表达式,将*替换为×

cc_05.png

"characterConversion.rules": [
    [
        "\\S (\\*) \\S",
        "×",
        1
    ]
],

单词缩写

例如,将function缩写为fn

cc_07.png

呃……好吧,可能不是个好的做法,如果满屏都是fn,看着就像是另一种语言了。