阮一峰老师推荐的vscode的插件~

25,328 阅读2分钟

大家好,我是 Simon,一个开源爱好者,最近写了一个新的 vscode 插件,投稿了阮一峰老师的周刊,被推荐了,接下来我来介绍一下这个插件的功能,以及如何使用。

vscode-highlight-text 插件的名字就是代表含义,高亮渲染文本,最初灵感来源于川哥说,v-if 那么重要的属性,没有特殊标识,注意不到可能就有很大的问题,于是早期设计只是针对 v-if,后来想想干脆直接针对 vue 所有属性都可以设计,再后来 vue 可以,那么所有类型文件都可以扩展,于是开始一步步的改进才到了今天的效果。

你可以针对任何想要突出的重点语法或者属性或者事件或者路径,everything 都可以被高亮,通过字符串的 match,比如我希望突出 vue 中 slotName

image.png

再比如我希望一眼看出我本地导入的依赖和 node_modules 的依赖 和 css 的引入

image.png

你还可以针对 function 和 async function 特殊高亮

image.png

你甚至可以用他去美化你的 markdown 文件, 区分大标题和小标题等等

image.png

还有更多有趣的使用,等待你来开创~

说一下如何配置这些规则吧,其实它就是正则驱动去匹配区域高亮内容,所以要在 settings 的 vscode-highlight-text.rules 下,首先配置你的语言,例如 vue,react,markdown,php 等等,然后指定一个颜色,在下面match对应的是正则的字符串了,他会被转换成正则去匹配,另外正则中可能存在多个 match 项,你可以指定 colors: color[],针对每一个 match 去指定不同的颜色,如果你不希望单单指定颜色,你可以使用 matchCss: style[],如果你对源码感兴趣的话可以从仓库中学习,代码量也很精简,如果你对 vscode 插件开发感兴趣,你可以试着了解一下 vscode-use,它能帮助你快速开发一个 vscode 插件

image.png