大家好,我是 Simon,一个开源爱好者,最近写了一个新的 vscode 插件,投稿了阮一峰老师的周刊,被推荐了,接下来我来介绍一下这个插件的功能,以及如何使用。
vscode-highlight-text 插件的名字就是代表含义,高亮渲染文本,最初灵感来源于川哥说,v-if 那么重要的属性,没有特殊标识,注意不到可能就有很大的问题,于是早期设计只是针对 v-if
,后来想想干脆直接针对 vue 所有属性都可以设计,再后来 vue 可以,那么所有类型文件都可以扩展,于是开始一步步的改进才到了今天的效果。
你可以针对任何想要突出的重点语法或者属性或者事件或者路径,everything 都可以被高亮,通过字符串的 match,比如我希望突出 vue 中 slotName
再比如我希望一眼看出我本地导入的依赖和 node_modules 的依赖 和 css 的引入
你还可以针对 function 和 async function 特殊高亮
你甚至可以用他去美化你的 markdown 文件, 区分大标题和小标题等等
还有更多有趣的使用,等待你来开创~
说一下如何配置这些规则吧,其实它就是正则驱动去匹配区域高亮内容,所以要在 settings 的 vscode-highlight-text.rules 下,首先配置你的语言,例如 vue,react,markdown,php 等等,然后指定一个颜色,在下面match对应的是正则的字符串了,他会被转换成正则去匹配,另外正则中可能存在多个 match 项,你可以指定 colors: color[]
,针对每一个 match 去指定不同的颜色,如果你不希望单单指定颜色,你可以使用 matchCss: style[]
,如果你对源码感兴趣的话可以从仓库中学习,代码量也很精简,如果你对 vscode 插件开发感兴趣,你可以试着了解一下 vscode-use,它能帮助你快速开发一个 vscode 插件